::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' в этой спецификации.
Рекомендация Изначальное определение, используя синтаксис с одним двоеточием.

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

BCD tables only load in the browser

См. также