Это специальный синтаксис, позволяющий стилизовать определенные части элемента или добавлять специальные элементы (как бы "элементы-призраки"), не создавая для этого дополнительные теги в HTML. Псевдоэлементы предоставляют удобный способ внесения изменений в структуру документа, не затрагивая HTML.
Начинается с двойного двоеточия (::
), за которым следует название псевдоэлемента. Например, ::before
или ::after
.::before
и ::after
: Позволяют вставлять содержимое до или после содержимого выбранного элемента соответственно. Очень часто используются для добавления декоративных элементов.
p::before {
content: "«";
color: blue;
}
p::after {
content: "»";
color: blue;
}
::first-line
: Применяет стили к первой строке текста в блочном элементе.p::first-line {
font-weight: bold;
}
::first-letter
: Применяет стили к первой букве текста в блочном элементе.p::first-letter {
font-size: 200%;
}
::selection
: Применяет стили к части текста, которую пользователь выделил.p::selection {
background: yellow;
}
Работают как часть документа, но на самом деле не существуют в DOM-дереве, а создаются стилями.
Чтобы псевдоэлементы
::before
и ::after
отображались, необходимо задать свойство content
, даже если оно пустое (content: "";
).Могут быть стилизованы почти так же, как обычные элементы, но есть некоторые ограничения, например, связанные с взаимодействием с JavaScript.
Ставь 👍 и забирай 📚 Базу знаний