Опубликовано: 18.08.2010 Последняя правка: 08.12.2015
CSS1CSS2CSS2.1CSS3
IEChromeFireFoxOperaSafari

: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 :before

Версии CSS

Версия:CSS 1CSS 2CSS 2.1CSS 3
Поддержка:НетДаДаДа

Браузеры

Браузер:Internet ExplorerGoogle ChromeMozilla FirefoxOperaSafari
Версия:6.0 и 7.08.0 и выше2.0 и выше2.0 и выше9.2 и выше3.1 и выше
Поддержка:НетДаДаДаДаДа