--- title: '::before (:before)' slug: 'Web/CSS/::before' tags: - CSS - Layout - Reference - Web - Псевдоэлементы translation_of: 'Web/CSS/::before' ---
{{CSSRef}}

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

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

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

Синтаксис

{{csssyntax}}

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

Примеры

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

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

HTML

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

CSS

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

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

Результат

{{EmbedLiveSample('Добавление_кавычек', '500', '50', '')}}

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

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

HTML

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

CSS

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

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

Результат

{{EmbedLiveSample('Пример_оформления', 450, 60)}}

Список дел

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

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. Попробуйте выполнить некоторые вещи списка.

Результат

{{EmbedLiveSample('Список_дел', 400, 300)}}

Примечания

Хотя исправления в 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;
}

Результат

{{EmbedLiveSample("Примечания")}}

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

Спецификация Статус Комментарий
{{SpecName('CSS4 Pseudo-Elements', '#selectordef-before', '::before')}} {{Spec2('CSS4 Pseudo-Elements')}} Нет значительных изменений по сравнению с предыдущей версией спецификации.
{{Specname("CSS3 Transitions", "#animatable-properties", "")}} {{Spec2("CSS3 Transitions")}} Разрешает переходы для свойств, определённых в псевдоэлементах.
{{Specname("CSS3 Animations", "", "")}} {{Spec2("CSS3 Animations")}} Разрешает анимации на свойствах, определённых в псевдоэлементах.
{{SpecName('CSS3 Selectors', '#gen-content', '::before')}} {{Spec2('CSS3 Selectors')}} Введение синтаксиса с двумя двоеточиями.
{{SpecName('CSS2.1', 'generate.html#before-after-content', '::before')}} {{Spec2('CSS2.1')}} Изначальное определение, используя синтаксис с одним двоеточием.

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

{{Compat("css.selectors.before")}}

См. также