Псевдоэлемент (двойное двоеточие ::) стилизует определённую часть элемента или генерирует контент, которого нет в HTML — без добавления дополнительной разметки.
::before и ::after — генерируемый контент
css
{
: ;
}
{
: ;
}
Псевдоэлемент (двойное двоеточие ::) стилизует определённую часть элемента или генерирует контент, которого нет в HTML — без добавления дополнительной разметки.
{
: ;
}
{
: ;
}
Свойство content обязательно — без него псевдоэлемент не отображается. Генерируемый контент — это дочерний элемент в самом начале (::before) или в конце (::after) элемента.
.tooltip::after {
content: ""; /* empty but present → creates a box */
position: absolute;
border: 8px solid transparent;
border-top-color: black; /* a CSS triangle (tooltip arrow) */
}
Вот классическое применение: рисование стрелок, значков, оверлеев, декоративных линий — сохранение HTML в чистоте от чисто визуальных элементов.
p::first-line { font-weight: bold; } /* the first rendered line */
p::first-letter { font-size: 3em; } /* drop cap */
::selection { background: yellow; } /* highlighted/selected text */
input::placeholder { color: gray; } /* placeholder text */
.x:hover { } /* pseudo-CLASS (state) — one colon */
.x::before { } /* pseudo-ELEMENT (a part) — two colons */
CSS3 представил :: для различения псевдоэлементов и псевдоклассов (браузеры по-прежнему принимают одинарное двоеточие на старых для совместимости, но используйте ::.).
Генерируемый content читается некоторыми программами чтения с экрана — не размещайте важную информацию только в ::before/::after (используйте для украшения), а декоративные значки лучше исключить из дерева доступности.
Псевдоэлементы позволяют добавлять значки, декоративные фигуры (стрелки, разделители), инициалы и счётчики чистым CSS — без дополнительных <div>s или <span>s.
Они сохраняют семантичность разметки, обеспечивая при этом богатые визуальные эффекты, и являются неотъемлемой частью чистого и удобного в поддержке оформления.