This page was translated from English by the community. Learn more and join the MDN Web Docs community.
Псевдоэлементы
Псевдоэлемент в CSS — это ключевое слово, добавляемое к селектору, которое позволяет стилизовать определённую часть выбранного элемента. Например, псевдоэлемент ::first-line может быть использован для изменения шрифта первой строки абзаца.
/* Первая строка каждого элемента <p>. */
p::first-line {
color: blue;
text-transform: uppercase;
}
Примечание: В отличие от псевдоэлементов, псевдоклассы могут быть использованы для стилизации элемента на основе его состояния.
Синтаксис
selector::pseudo-element {
property: value;
}
В селекторе можно использовать только один псевдоэлемент. Он должен находиться после простых селекторов в выражении.
Примечание:
Как правило, следует использовать двойное двоеточие (::) вместо одинарного (:). В этом состоит различие между псевдоклассами и псевдоэлементами. Однако, так как это различие не присутствовало в старых версиях спецификации W3C, большинство браузеров поддерживают оба синтаксиса для псевдоэлементов.
Список стандартных псевдоэлементов
::after::before::cue::first-letter::first-line::selection::slotted::backdropЭкспериментальная возможность::placeholderЭкспериментальная возможность::markerЭкспериментальная возможность::spelling-errorЭкспериментальная возможность::grammar-errorЭкспериментальная возможность
| Браузер | Начиная с версии | Поддерживает |
|---|---|---|
| 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 |