Псевдоэлемент

Если псевдокласс отвечает на вопрос «в каком состоянии элемент», то псевдоэлемент — «к какой его части обращаемся». Одни псевдоэлементы выделяют то, что уже есть, но не обёрнуто в тег: первую строку абзаца, первую букву, выделенный мышью текст, маркер списка. Другие создают новые блоки: ::before и ::after вставляют генерируемое содержимое в начало и в конец элемента.

Двойное двоеточие ввели в CSS3, чтобы отличать псевдоэлементы от псевдоклассов. Старые псевдоэлементы из CSS2 — :before, :after, :first-line, :first-letter — браузеры ради совместимости понимают и с одним двоеточием.

Пример: декор без лишней разметки

/* галочка перед пунктом списка преимуществ */
.benefits li::before {
  content: "✓";
  margin-right: 8px;
  color: #2f9e44;
}
/* звёздочка у метки обязательного поля */
.label-required::after { content: " *"; color: #d6336c; }

/* цвет выделения текста и маркеров списка */
::selection { background: #ffe066; }
li::marker { color: #2a6df4; }

Что важно знать

• Без content нет блока. ::before и ::after появляются, только если задано свойство content, хотя бы пустое: content: "".
• Не у всех элементов. У заменяемых элементов — img, input, video — вставки ::before и ::after не работают, потому что собственного содержимого у них нет. Иконку для поля ввода вешают на обёртку.
• Текст из content может прочитать экранный диктор, но его нельзя выделить и скопировать. Смысловое содержимое — цены, предупреждения — должно быть в HTML, а в псевдоэлементах — только оформление.
• Место в селекторе. Псевдоэлемент пишут в самом конце: .card:hover::after, а не .card::after:hover.