Референсный справочник псевдоэлементов CSS

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

Псевдоэлементы CSS используются для установки стиля специфических частей элементов.

Например, это можно использовать для:

  • Установка стиля первой буквы или первой строки элемента
  • Вставка содержимого перед или после содержимого элемента
  • Установка стиля маркера списка
  • Установка стиля фона для диалога

В таблице ниже показаны различные псевдоэлементы CSS:

Псевдоэлемент Пример Описание примера
::after p::after Вставка содержимого после указанного элемента.
::backdrop dialog::backdrop Устанавливает стиль фона для диалога или всплывающего элемента.
::before p::before Вставка содержимого перед указанным элементом.
::file-selector-button ::file-selector-button Выбор кнопки для типа <input type="file">.
::first-letter p::first-letter Выбор первой буквы каждого элемента <p>.
::first-line p::first-line Выбор первой строки каждого элемента <p>.
::grammar-error ::grammar-error Устанавливает стиль текста, помеченного браузером как грамматическую ошибку.
::highlight() ::highlight(custom-name) Выбор пользовательской выделенной области.
::marker ::marker Маркер для выбранного элемента списка.
::placeholder input::placeholder Устанавливает стиль текста占位щика для элементов <input> или <textarea>.
::selection ::selection Устанавливает стиль выделенного пользователем текста.
::spelling-error ::spelling-error Устанавливает стиль текста, помеченного браузером как орфографическую ошибку.
::view-transition ::view-transition Корень叠加ла для переходов вида, содержащий все переходы вида на странице.
::view-transition-group ::view-transition-group Представляет группу снимков перехода одного вида.
::view-transition-image-pair ::view-transition-image-pair Контейнер для "старого" и "нового" состояний просмотра, представляющих переходы (до и после перехода).
::view-transition-new ::view-transition-new Новое состояние просмотра, представляющее переход视图.
::view-transition-old ::view-transition-old Старое состояние просмотра, представляющее переход视图.