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

::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" "http://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
Версия:До 9.09.0 и выше2.0 и выше2.0 и выше9.2 и выше3.1 и выше
Поддержка:НетДаДаДаДаДа