Описание тега pseudo-element

Псевдоэлементы CSS (буквально "ложные элементы") позволяют улучшить отображение содержимого в элементах или возможность создавать дополнительное начальное или конечное содержимое для элементов. Он позволяет применять многие свойства CSS, обычно доступные только для реальных элементов, непосредственно к контенту. Псевдоэлементы не следует путать с псевдоклассами.

Список псевдоэлементов CSS

Это список всех псевдоэлементов, которые в настоящее время включены в спецификации CSS (а не черновики редакторов или предстоящие спецификации).

• ::first-line а также ::first-letter
  Выбирает первую строку или букву в тексте элемента.

• ::before а также ::after
  Используется для вставки содержимого до или после содержимого элемента с помощью contentсвойство. Вcontent может быть установлен как текст и украшен другими свойствами, или его можно оставить пустым, установив content: '', позволяя использовать псевдоэлемент для создания блоков, отображения фоновых изображений и т. д. без создания текстового содержимого. Вы не можете использовать эти псевдоэлементы для вставки дополнительного HTML, и вы не можете использовать их с замененными элементами (см. Ниже), которые не имеют фактического содержимого. Это связано с тем, что сгенерированный контент находится внутри элемента.

Замененные элементы и другие элементы, не допускающие псевдоэлементов

Любой элемент, внешний вид и / или размеры которого определяются каким-либо внешним ресурсом, считается заменяемым элементом и выходит за рамки модели форматирования CSS. Из-за этого некоторые псевдоэлементы не могут быть применены к заменяемым элементам, в значительной степени потому, что они сами не имеют "содержимого" или заменяются чем-то (например, элементами управления пользовательского интерфейса). Элементы, замененные или не содержащие контент, включают изображения (<img>), встроенные фреймы (<iframe>), разрывы строк (<br>), горизонтальные линейки (<hr>), плагины (<object>), некоторые элементы формы (<textarea>, <input>, а также <select>), видео (<video>), звуковые сигналы (<audio>), и холсты (<canvas>). Любой другой элемент считается незамещенным или, по крайней мере, элементом, содержащим контент, с которым могут использоваться псевдоэлементы. Для получения дополнительной информации о замененных элементах см. Черновик спецификации HTML5.