::before (:before)

В CSS, ::before создаёт псевдоэлемент,который является первым потомком выбранного элемента. Часто используется для добавления косметического содержимого в элемент с помощью свойства content. По умолчания является инлайновым.

/* Добавить сердце перед ссылками */
a::before {
  content: "";
}

Примечание: Псведоэлементы, созданные с помощью ::before и ::after содержатся в блоке форматирования элемента, и поэтому не применяются к замещаемым элементам, таким как <img> или <br>.

Синтаксис

/* CSS3 syntax */
::before

/* CSS2 syntax */
:before

В CSS3 появилась запись ::before (с двумя двоеточиями) для различения псевдоклассов и псевдоэлементов. Браузеры также поддерживают запись :before, введённую в CSS2.

Примеры

Добавление кавычек

Этот простой пример использования псевдоэлементов ::before позволяет добавлять кавычки. Здесь используется как псевдоэлемент ::before, так и ::after.

HTML

<q>Немного кавычек</q>, как он сказал, <q>лучше чем ничего.</q>

CSS

q::before { 
  content: "«";
  color: blue;
}

q::after { 
  content: "»";
  color: red;
}

Результат

Пример оформления

Можно стилизовать текст или изображения в свойстве content практически любым способом.

HTML

<span class="ribbon">Посмотрите, где находится оранжевый прямоугольник.</span>

CSS

.ribbon {
  background-color: #5BC8F7;
}

.ribbon::before {
  content: "Посмотрите на этот оранжевый прямоугольник.";
  background-color: #FFBA10;
  border-color: black;
  border-style: dotted;
}

Результат

Список дел

В этом примере мы создадим простой список дел,используя псевдоэлементы. Этот метод часто применяется для добавления небольших штрихов в пользовательский интерфейс и улучшения впечатления пользователей.

HTML

<ul>
  <li>Купить молока</li>
  <li>Сходить на прогулку с собакой</li>
  <li>Тренироваться</li>
  <li>Написать код</li>
  <li>Слушать музыку</li>
  <li>Отдыхать</li>
</ul>

CSS

li {
  list-style-type: none;
  position: relative;
  margin: 2px;
  padding: 0.5em 0.5em 0.5em 2em;
  background: lightgrey;
  font-family: sans-serif;
}

li.done {
  background: #CCFF99;
}

li.done::before {
  content: '';
  position: absolute;
  border-color: #009933;
  border-style: solid;
  border-width: 0 0.3em 0.25em 0;
  height: 1em;
  top: 1.3em;
  left: 0.6em;
  margin-top: -1em;
  transform: rotate(45deg);
  width: 0.5em;
}

JavaScript

var list = document.querySelector('ul');
list.addEventListener('click', function(ev) {
  if( ev.target.tagName === 'LI') {
     ev.target.classList.toggle('done'); 
  }
}, false);

Вот живой пример приведённого выше кода. Заметим, что здесь не используются иконки, а зелёная галочка на самом деле является псевдоэлементом ::before, стилизованном с помощью CSS. Попробуйте выполнить некоторые вещи списка.

Результат

Примечания

Хотя исправления в Firefox 3.5 не позволяют созданному содержимому вести себя как отдельный предшествующий элемент (согласно спецификации CSS: "Псевдоэлементы :before и :after взаимодействуют с другими элементами... как если бы они были настоящими элементами, добавленными в соответствующий им элемент."), они могут быть использованы для небольшого улучшения в разметке без таблиц (например для центрирования). В предположении, что содержимое, которое необходимо центрировать, уже обёрнуто в некоторый элемент, столбцы перед и после содержимого могут быть добавлены без добавления других элементов (например в данном случае вероятно является более корректным обернуть текст в элемент <span>, как в примере ниже, вместо того чтобы добавлять два пустых элемента <div/> до и после текста). (И всегда устанавливайте ширину плавающего элемента, иначе он не будет плавающим!)

HTML

<div class="example">
<span id="floatme">"Плавающий перед" будет добавлен слева от текста
и не позволит переполнению этой строки обтекать его снизу.
Аналогично, "Плавающий после" будет добавлен справа от текста 
и не позволит переполнению этой строки обтекать его снизу.</span>
</div>

CSS

#floatme { float: left; width: 50%; }

/* Чтобы получить пустой столбец достаточно указать шестнадцатеричный код неразрывного пробела \a0 в качестве содержимого (используйте \0000a0, если за этим пробелом следуют другие символы) */
.example::before {
  content: "Плавающий перед";
  float: left;
  width: 25%
}
.example::after {
  content: "Плавающий после";
  float: right;
  width:25%
}

/* Для стилизации */
.example::before, .example::after {
  background: yellow;
  color: red;
}

Результат

Спецификации

Спецификация Статус Комментарий
CSS Pseudo-Elements Level 4
Определение '::before' в этой спецификации.
Рабочий черновик Нет значительных изменений по сравнению с предыдущей версией спецификации.
CSS Transitions Рабочий черновик Разрешает переходы для свойств, определённых в псевдоэлементах.
CSS Animations Рабочий черновик Разрешает анимации на свойствах, определённых в псевдоэлементах.
Selectors Level 3
Определение '::before' в этой спецификации.
Рекомендация Введение синтаксиса с двумя двоеточиями.
CSS Level 2 (Revision 1)
Определение '::before' в этой спецификации.
Рекомендация Изначальное определение, используя синтаксис с одним двоеточием.

Поддержка браузерами

Update compatibility data on GitHub
КомпьютерыМобильные
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome для AndroidFirefox для AndroidOpera для AndroidSafari on iOSSamsung Internet
::beforeChrome Полная поддержка 1
Полная поддержка 1
Полная поддержка 1
Альтернативное имя
Альтернативное имя Использует нестандартное имя: :before
Edge Полная поддержка 12
Полная поддержка 12
Полная поддержка 12
Альтернативное имя
Альтернативное имя Использует нестандартное имя: :before
Firefox Полная поддержка 1.5
Замечания
Полная поддержка 1.5
Замечания
Замечания Before Firefox 57, Firefox had a bug where ::before pseudo-elements were still generated, even if the content property value were set to normal or none.
Замечания Before Firefox 3.5, only the CSS level 2 behavior of :before was supported, which disallowed position, float, list-style-* and some display properties.
Полная поддержка 1
Альтернативное имя
Альтернативное имя Использует нестандартное имя: :before
IE Полная поддержка 9
Полная поддержка 9
Полная поддержка 8
Альтернативное имя
Альтернативное имя Использует нестандартное имя: :before
Opera Полная поддержка 7
Полная поддержка 7
Полная поддержка 4
Альтернативное имя
Альтернативное имя Использует нестандартное имя: :before
Safari Полная поддержка 4
Полная поддержка 4
Полная поддержка 4
Альтернативное имя
Альтернативное имя Использует нестандартное имя: :before
WebView Android Полная поддержка ≤37
Полная поддержка ≤37
Полная поддержка ≤37
Альтернативное имя
Альтернативное имя Использует нестандартное имя: :before
Chrome Android Полная поддержка 18
Полная поддержка 18
Полная поддержка 18
Альтернативное имя
Альтернативное имя Использует нестандартное имя: :before
Firefox Android Полная поддержка 4
Замечания
Полная поддержка 4
Замечания
Замечания Before Firefox 57, Firefox had a bug where ::before pseudo-elements were still generated, even if the content property value were set to normal or none.
Полная поддержка 4
Альтернативное имя
Альтернативное имя Использует нестандартное имя: :before
Opera Android Полная поддержка 10.1
Полная поддержка 10.1
Полная поддержка 10.1
Альтернативное имя
Альтернативное имя Использует нестандартное имя: :before
Safari iOS Полная поддержка 5.1Samsung Internet Android Полная поддержка 1.0
Полная поддержка 1.0
Полная поддержка 1.0
Альтернативное имя
Альтернативное имя Использует нестандартное имя: :before
Animation and transition supportChrome Полная поддержка 26Edge Полная поддержка 12Firefox Полная поддержка 4IE Нет поддержки НетOpera Полная поддержка 15Safari Нет поддержки НетWebView Android Полная поддержка ≤37Chrome Android Полная поддержка 26Firefox Android Полная поддержка 4Opera Android Полная поддержка 14Safari iOS Нет поддержки НетSamsung Internet Android Полная поддержка 1.5

Легенда

Полная поддержка  
Полная поддержка
Нет поддержки  
Нет поддержки
Смотрите замечания реализации.
Смотрите замечания реализации.
Использует нестандартное имя.
Использует нестандартное имя.

См. также