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

Псевдоэлемент в CSS — это ключевое слово, добавляемое к селектору, которое позволяет стилизовать определённую часть выбранного элемента. Например, псевдоэлемент ::first-line может быть использован для изменения шрифта первой строки абзаца.

css
/* Первая строка каждого элемента <p>. */
p::first-line {
  color: blue;
  text-transform: uppercase;
}

Примечание: В отличие от псевдоэлементов, псевдоклассы могут быть использованы для стилизации элемента на основе его состояния.

Синтаксис

selector::pseudo-element {
  property: value;
}

В селекторе можно использовать только один псевдоэлемент. Он должен находиться после простых селекторов в выражении.

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

Список стандартных псевдоэлементов

Браузер Начиная с версии Поддерживает
Internet Explorer 8.0 :pseudo-element
9.0 :pseudo-element ::pseudo-element
Firefox (Gecko) 1.0 (1.0) :pseudo-element
1.0 (1.5) :pseudo-element ::pseudo-element
Opera 4.0 :pseudo-element
7.0 :pseudo-element ::pseudo-element
Safari (WebKit) 1.0 (85) :pseudo-element ::pseudo-element

Смотрите также