В чем разница между Псевдоклассом и Псевдоэлементом в CSS?

Псевдокласс выбирает элемент в определённом состоянии или положении, а псевдоэлемент создаёт или выбирает часть элемента, которой нет в DOM.

Псевдоклассы — одно двоеточие

a:hover { color: red; }              /* состояние */
input:focus-visible { outline: 2px solid; }
li:nth-child(2n) { background: #f5f5f5; } /* положение */
.card:has(img) { padding: 0; }

Псевдоэлементы — два двоеточия

.quote::before { content: '«'; }     /* добавленный контент */
p::first-line { font-weight: bold; } /* часть текста */
input::placeholder { color: #999; }
::selection { background: yellow; }

Отличия

• псевдокласс — про состояние существующего элемента, псевдоэлемент — про виртуальную часть;
• у элемента может быть много псевдоклассов, но в селекторе только один псевдоэлемент, и он стоит в конце;
• ::before и ::after требуют content.

Коротко для собеседования

Псевдокласс (:hover) выбирает элемент по состоянию или положению, псевдоэлемент (::before) — создаёт или выбирает часть элемента.

Подробнее: MDN — Псевдоклассы и псевдоэлементы