:before
Псевдоэлемент CSS :before используется для автоматического добавления дополнительной информации в начало содержимого какого-либо HTML-элемента. Для того, чтобы указать какое именно содержимое будет добавлено применяется свойство content.
По умолчанию все вставляемое с помощью :before содержимое является аналогом элемента уровня строки (inline). Если говорить проще, то это практически то же самое, что и добавление в конце элемента чего-либо заключенного в тег <SPAN> с тем лишь отличием, что этот тег мы можем указывать не во всех HTML-элементах, а вот :before можно применить к любому. И, естественно, если необходимо, чтобы добавленная информация стала блоком — нужно просто использовать свойство display.
Обратите внимание, что к добавляемому содержимому также будут применены стили, воздействующие на сам HTML-элемент, но только те, которые могут наследоваться. Кроме этого, если псевдоэлементы :first-line или :first-letter используются совместно с :before, то они будут применены к первой строке или символу элемента с учетом добавленного содержимого.
Тип псевдоэлемента
Назначение: псевдоэлементы.
Применяется: ко всем элементам.
Значения
У псевдоэлемента :before нет значений.
Синтаксис
селектор:before { content: значение }
селектор:before { content: "текст" }Пример 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 | |
| Версия: | 6.0 и 7.0 | 8.0 и выше | 2.0 и выше | 2.0 и выше | 9.2 и выше | 3.1 и выше |
| Поддержка: | Нет | Да | Да | Да | Да | Да |