::before (:before)

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

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

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

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

Синтаксис

Error: could not find syntax for this item

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

Примеры

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

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

HTML

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

CSS

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

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

Результат

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

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

HTML

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

CSS

css
.ribbon {
  background-color: #5bc8f7;
}

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

Результат

Список дел

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

HTML

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

CSS

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

js
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

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

CSS

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;
}

Результат

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

Specification
CSS Pseudo-Elements Module Level 4
# generated-content

Совместимость с браузерами

BCD tables only load in the browser

Смотрите также