Чем псевдоклассы отличаются от псевдоэлементов?

Псевдоклассы и псевдоэлементы CSS - :hover, ::before

Псевдоклассы и псевдоэлементы

Псевдоклассы (:) - состояния элемента

Описывают состояние или положение элемента в DOM.

a:hover   { color: blue }
a:focus   { outline: 2px solid }
input:disabled { opacity: 0.5 }

li:first-child   { font-weight: bold }
li:last-child    { margin-bottom: 0 }
li:nth-child(2n) { background: #f5f5f5 }
p:not(.special)  { color: gray }

Псевдоэлементы (::) - виртуальные части

Создают элементы, которых нет в DOM. Требуют content.

.quote::before { content: "«" }
.quote::after  { content: "»" }

.icon::before {
  content: "";
  display: block;
  width: 20px; height: 20px;
  background: url(icon.svg);
}

p::first-line { font-variant: small-caps }
::selection   { background: yellow }
input::placeholder { color: #aaa }

Одно двоеточие (:before) - старый синтаксис CSS2, браузеры поддерживают, но ::before предпочтительнее.