::before
Псевдоэлемент CSS ::before используется для автоматического добавления дополнительной информации в начало содержимого какого-либо HTML-элемента. Для того, чтобы указать какое именно содержимое будет добавлено применяется свойство content. Данный псевдоэлемент пришел на смену псевдоэлементу :before с той лишь целью, чтобы появилось визуальное отличие от псевдоклассов.
По умолчанию все вставляемое с помощью ::before содержимое является аналогом элемента уровня строки (inline). Если говорить проще, то это практически то же самое, что и добавление в конце элемента чего-либо заключенного в тег <SPAN> с тем лишь отличием, что этот тег мы можем указывать не во всех HTML-элементах, а вот ::before можно применить к любому. И, естественно, если необходимо, чтобы добавленная информация стала блоком — нужно просто использовать свойство display.
Обратите внимание, что к добавляемому содержимому также будут применены стили, воздействующие на сам HTML-элемент, но только те, которые могут наследоваться. Кроме этого, если псевдоэлементы ::first-line или ::first-letter используются совместно с ::before, то они будут применены к первой строке или символу элемента с учетом добавленного содержимого.
Тип псевдоэлемента
Назначение: псевдоэлементы.
Применяется: ко всем элементам.
Значения
У псевдоэлемента ::before нет значений.
Синтаксис
селектор::before { }Пример CSS: использование ::before
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "https://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>seodon.ru - CSS псевдоэлемент ::before</title>
<style type="text/css">
h2::before {
content: "§"; /* добавляемый текст */
color:#ff0000; /* цвет текста */
margin-right:5px; /* пустое поле справа */
}
</style>
</head>
<body>
<h2>Описание псевдоэлементов</h2>
</body>
</html>Результат. Использование псевдоэлемента CSS ::before.
Версии CSS
| Версия: | CSS 1 | CSS 2 | CSS 2.1 | CSS 3 |
| Поддержка: | Нет | Нет | Нет | Да |
Браузеры
| Браузер: | Internet Explorer | Google Chrome | Mozilla Firefox | Opera | Safari | |
| Версия: | До 9.0 | 9.0 и выше | 2.0 и выше | 2.0 и выше | 9.2 и выше | 3.1 и выше |
| Поддержка: | Нет | Да | Да | Да | Да | Да |