CSS ::перед селектором
Пример
Вставьте текст перед содержимым каждого элемента <p>:
p::before
{
content: "Read this: ";
}
Другие примеры «Попробуйте сами» ниже.
Определение и использование
Селектор ::before
вставляет что-то перед содержимым каждого выбранного элемента(ов).
Используйте свойство содержимого , чтобы указать содержимое для вставки.
Используйте селектор :: after, чтобы вставить что-то после содержимого.
Версия: | CSS2 |
---|
Поддержка браузера
Цифры в таблице указывают на первую версию браузера, которая полностью поддерживает селектор.
Selector | |||||
---|---|---|---|---|---|
::before | 4.0 | 9.0 | 3.5 | 3.1 | 7.0 |
Синтаксис CSS
::before {
css declarations;
}
Дополнительные примеры
Пример
Вставьте содержимое перед содержимым каждого элемента <p> и стилизуйте вставленное содержимое:
p::before
{
content: "Read this -";
background-color: yellow;
color: red;
font-weight: bold;
}
Связанные страницы
Учебник по CSS : Псевдоэлементы CSS
Справочник по селекторам CSS: селектор CSS ::after