СSS Селектор ::before
Пример
Вставить некоторый текст перед содержимым каждого элемента <p>:
p::before
{
content: "Читать это: ";
}
Редактор кода »
Определение и использование
Селектор ::before вставляет что-то перед содержимым каждого выбранного элемента(ов).
Используйте свойство content для указания содержимого для вставки.
Используйте селектор ::after, чтобы вставить что-то после содержания.
| Версия: | CSS2 |
|---|
Поддержка браузеров
Числа в таблице указывают первую версию браузера, которая полностью поддерживает селектор.
| Селектор | |||||
|---|---|---|---|---|---|
| ::before | 4.0 | 9.0 Частично от 8.0 |
3.5 | 3.1 | 7.0 Частично от 4.0 |
Примечание: IE8 и Opera 4-6 поддерживают только старый синтаксис CSS с одним двоеточием (:before). Более новые версии поддерживают стандартный синтаксис CSS с двойным двоеточием (::before).
Примечание: Селектор :before работает в IE8, когда объявлена декларация <!DOCTYPE>.
CSS Синтаксис
::before {
css декларации;
}
Примеры
Пример
Вставляйте содержимое перед каждым элементом <p> и стиль вставленного содержимого:
p::before
{
content: "Читать это -";
background-color: yellow;
color: red;
font-weight: bold;
}
Редактор кода »
Связанные страницы
CSS Учебник: CSS Псевдо-элементы
CSS Справочник селекторов: CSS Селектор ::after
