В 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, .first {
  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 для AndroidEdge MobileFirefox для AndroidOpera для AndroidiOS SafariSamsung Internet
Базовая поддержкаChrome Полная поддержка Да
Полная поддержка Да
Полная поддержка Да
Альтернативное имя
Альтернативное имя Использует нестандартное имя: :before
Edge Полная поддержка Да
Полная поддержка Да
Полная поддержка Да
Альтернативное имя
Альтернативное имя Использует нестандартное имя: :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 Полная поддержка Да
Полная поддержка Да
Полная поддержка Да
Альтернативное имя
Альтернативное имя Использует нестандартное имя: :before
Chrome Android Полная поддержка Да
Полная поддержка Да
Полная поддержка Да
Альтернативное имя
Альтернативное имя Использует нестандартное имя: :before
Edge Mobile Полная поддержка Да
Полная поддержка Да
Полная поддержка Да
Альтернативное имя
Альтернативное имя Использует нестандартное имя: :before
Firefox Android Полная поддержка Да
Полная поддержка Да
Полная поддержка Да
Альтернативное имя
Альтернативное имя Использует нестандартное имя: :before
Opera Android ? Safari iOS Полная поддержка 5.1Samsung Internet Android Полная поддержка Да
Animation and transition supportChrome Полная поддержка 26Edge Полная поддержка ДаFirefox Полная поддержка 4IE Нет поддержки НетOpera Нет поддержки НетSafari Нет поддержки НетWebView Android Полная поддержка ДаChrome Android Полная поддержка ДаEdge Mobile Полная поддержка ДаFirefox Android Полная поддержка 4Opera Android Нет поддержки НетSafari iOS Нет поддержки НетSamsung Internet Android Полная поддержка Да

Легенда

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

См. также

Метки документа и участники

Внесли вклад в эту страницу: dima74, e-omo
Обновлялась последний раз: dima74,