Псевдоэлементы CSS используются для стилизации отдельных частей элементов. Они могут очень сильно помогать в работе со стилями, если уметь ими пользоваться. Приводим перевод статьи о самых полезных псевдоэлементах.
::first-letter
Псевдоэлемент ::first-letter используется для стилизации первой буквы текста.
Пример
::before и ::after
Псевдоэлементы ::before и ::after нужны для добавления контента перед или после содержимым самого элемента соответственно.
Пример
::selection
Этот псевдоэлемент позволяет стилизовать выделенную пользователем часть текста или элемент.
Пример
::placeholder
Псевдоэлемент ::placeholder отвечает за нативный текст-заглушку, который можно задать элементу <input> или <textarea> с помощью атрибута placeholder.
::marker
CSS псевдоэлемент ::marker открывает нам стилизацию маркера элемента списка, который по умолчанию стилизован как круг или число. Он работает на элементах, у которых значение свойства display – list-item, к примеру, <li> или <summary>.
Пример
Было бы неплохо добавить то, что псевдоэлемент ::marker доступен далеко не везде, и что его следует использовать пока только как прогрессивное улучшение.