Специальные селекторы: Псевдоэлементы.

  Псевдоэлементы позволяют определить фрагмент внутреннего содержимого элемента тега (как бы выделенный "дочерним" элементом, которого нет - псевдоэлементом) для применения стиля к этому фрагменту. Кроме того, с помощью псевдоэлементов можно дополнить внутренний контент элемента тега без применения "дочернего" элемента в HTML-коде.
  Технология теневого дерева предложила псевдоэлемент, который используется для определения стиля элементов в теневом дереве не являющимися элементами его HTML-кода.
  Если псевдоэлементом определяется фрагмент текстового контента, то таким псевдоэлементом можно задать только стиль соответствующий текстовому контенту.

Формат записи в коде CSS специального селектора псевдоэлемента:

  • Основной селекторПсевдоэлемент

Значения формата записи:

  Основной селектор - Устанавливает элементы тегов, к которым применяется псевдоэлемент, для определения в них пользовательского контента.

Значения:

  Псевдоэлемент - Устанавливает фрагмент пользовательского контента элемента тега, определенного основным селектором для применения к нему стиля, или указывает место для вставки дополнительного контента, или устанавливает элемент "вставленный" в теневое дерево, который не является элементом его HTML-кода.
  Пишется сразу (без пробела) за основным селектором.
  Для отличия от псевдокласса активации в CSS3 псевдоэлемент рекомендуется начинать с двойного символа : (двоеточие).

Значения:

  • ::after - Контент, назначенный атрибутом стиля content должен добавиться после пользовательского контента элемента тега определенного основным селектором.
      Применяется только с атрибутом стиля content.
  • ::backdrop - Определяется дополнительный слой, который скрывает остальное содержимое сайта, при получении полем элемента полноэкранного режима.
      Поле элемента может получить полноэкранный режим скриптом с помощью метода requestFullscreen объекта HTMLElement.
      Для этого слоя логично примененение лишь некоторых стилей. (Например стили цветового оформления.)
  • ::before - Контент, назначенный атрибутом стиля content должен добавиться перед пользовательским контентом элемента тега определенного основным селектором.
      Применяется только с арибутом стиля content.
  • ::first-letter - Определяется первый символ пользовательского текстового контента в элементе блочного тега.
      Если текстовому контенту определяемого элемента предшествует его "дочерний" элемент, то псевдоэлемент ::first-letter ничего не определит.
      Если псевдоэлемент ::first-letter применяется с арибутом стиля content, то ::first-letter определит первый символ добавленного контента.
  • ::first-line - Определяется первая строка пользовательского текстового контента в элементе блочного тега.
      Количество символов первой строки зависит от размеров окна или фрейма, поля элемента и размера шрифтов, и может меняться в процессе общения пользователя с Web-страницей.
  • ::grammar-error - Определяется текст поля элемента формы, который не прошёл орфографическую проверку.
      В связанном стиле допускается использовать только атрибуты color, background-color, cursor, text-shadow, text-decoration, text-emphasis-color.
  • ::marker - Определяется маркер списка.
      В этом случае основным селектором должны определяться элементы тегов OL и(или) UL.
  • ::placeholder - Определяется фоновый текст для поля элемента формы.
  • ::selection - Определяется выделенный пользователем на Web-странице фрагмент пользовательского текстового контента в элементе тега.
      В связанном стиле допускается использовать только атрибуты color, background-color, cursor, text-shadow, text-decoration, text-emphasis-color.
  • ::slotted(Селектор) - Указывает, что определяются элементы, которые были динамически вставлены в теневое дерево из его хоста.
      Псевдоэлемент ::slotted применяется для привязки стилей к элементам, которые были динамически вставлены в теневое дерево.
      На "дочерние" - хосту теневого дерева элементы тега SLOT и их "дочерние" элементы, стили, установленные псевдоэлементом ::slotted, не распространяются.

      Селектор - CSS-селектор, который задаёт условие определяющее удовлетворяет или нет вставленный элемент хоста теневого дерева для применения к нему стилей заданных псевдоэлементом ::slotted (например это может быть имя тега вставленного элемента).
      Псевдоэлемент ::slotted применяется в теневом дереве.
      Для псевдоэлемента ::slotted основной селектор не обязателен.
  • ::spelling-error - Определяется контент поля элемента формы, который не соответствует заданному шаблону, или не соответствует установленному диапазону.
      В связанном стиле допускается использовать только атрибуты color, background-color, cursor, text-shadow, text-decoration, text-emphasis-color.

В примере основным селектором определяется элемент тега DIV, псевдоэлементами устанавливается стиль content: url(Ссылка):

<STYLE>
  .divp:hover DIV::before {content: url("../content/pauk2.jpg") }
  .divp:hover DIV::after {content: url("../content/pauk1.jpg") }
</STYLE>
......

<FIELDSET class="divp">
  <DIV ALIGN=center>
    Пошла муха на базар и купила самовар!
  </DIV>
</FIELDSET>
Пример селекторов псевдоэлементов ::before и ::after - наведите мышку.
Пошла муха на базар и купила самовар!