::before

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨июль 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>Посмотрите, где находится оранжевый прямоугольник.</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

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>  <span    >"Плавающий перед" будет добавлен слева от текста и не позволит переполнению    этой строки обтекать его снизу. Аналогично, "Плавающий после" будет добавлен    справа от текста и не позволит переполнению этой строки обтекать его    снизу.</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;}