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

Модуль псевдоэлементов CSS определяет абстрактные элементы, которые напрямую не присутствуют в дереве документа. Эти абстрактные элементы, называемые псевдоэлементами, представляют части дерева рендеринга, которые можно выбрать и стилизовать. Псевдоэлементы используются для создания абстракций относительно дерева документа, выходящих за рамки возможностей самого дерева документа.

Псевдоэлементы предваряются двойным двоеточием (::). Вы добавляете псевдоэлементы к селекторам (как в p::first-line) для выбора и стилизации этих виртуальных элементов.

Псевдоэлементы позволяют выбирать сущности, не включённые в HTML, и части контента, которые невозможно выбрать иначе, не добавляя дополнительной разметки. Рассмотрим placeholder элемента <input>. Это абстрактный элемент, а не отдельный узел в дереве документа. Вы можете выбрать этот placeholder, используя псевдоэлемент ::placeholder. В качестве другого примера, псевдоэлемент ::selection соответствует содержанию, в данный момент выделенному пользователем, позволяя стилизовать выделенный фрагмент, когда пользователь взаимодействует с контентом и изменяет выделение. Аналогично, псевдоэлемент ::first-line выбирает первую строку элемента, автоматически обновляясь, если количество символов в первой строке изменяется, без необходимости запроса длины строки элемента.