Псевдоэлемент CSS `::before`

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

Попробуйте

a {
  color: blue;
  text-decoration: none;
}

a::before {
  content: "🔗";
}

.local-link::before {
  content: url("/shared-assets/images/examples/firefox-logo.svg");
  display: inline-block;
  width: 15px;
  height: 15px;
  margin-right: 5px;
}

<p>
  Learning resources for web developers can be found all over the internet. Try
  out
  <a href="https://web.dev/">web.dev</a>,
  <a href="https://www.w3schools.com/">w3schools.com</a> or our
  <a href="https://developer.mozilla.org/" class="local-link">MDN web docs</a>.
</p>

Синтаксис

::before {
  content: /* value */;
  /* properties */
}

Описание

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

Псевдоэлементы ::before нельзя применять к замещаемым элементам, таким как <img>, содержимое которых определяется внешними ресурсами и на которые не влияют стили текущего документа.

Псевдоэлемент ::before со значением свойства display list-item ведёт себя как элемент списка и поэтому может создавать псевдоэлемент ::marker, как и элемент <li>.

Если свойство content не задано, имеет недопустимое значение или имеет значение normal или none, псевдоэлемент ::before не отображается. Он ведёт себя так, как если бы было задано значение display: none.

По умолчанию псевдоэлементы ::before и ::after используют тот же контекст наложения, что и их родительский элемент. Если свойство z-index не задано явно, сгенерированное содержимое псевдоэлемента ::after отображается поверх сгенерированного содержимого псевдоэлемента ::before, поскольку ::after отображается позже в потоке DOM.

Доступность

Не рекомендуется использовать псевдоэлемент ::before для добавления содержимого, поскольку программы чтения с экрана не всегда могут надёжно его прочитать.

Примеры

Кавычки

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

HTML

<q>Some quotes</q>, he said, <q>are better than none.</q>

CSS

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

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

Результат

Декоративный пример

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

HTML

<span class="ribbon">Notice where the orange box is.</span>

CSS

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

.ribbon::before {
  content: "Look at this orange box.";
  background-color: #ffba10;
  border-color: black;
  border-style: dotted;
}

Результат

Список дел

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

HTML

<ul>
  <li>Buy milk</li>
  <li>Take the dog for a walk</li>
  <li>Exercise</li>
  <li>Write code</li>
  <li>Play music</li>
  <li>Relax</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

const list = document.querySelector("ul");
list.addEventListener("click", (ev) => {
  if (ev.target.tagName === "LI") {
    ev.target.classList.toggle("done");
  }
});

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

Результат

Управляющие последовательности Unicode

Поскольку генерируемое содержимое — это CSS, а не HTML, нельзя использовать HTML-мнемоники в значениях content. Если нужно использовать специальный символ, который нельзя ввести непосредственно в строку CSS content, используйте управляющую последовательность Unicode. Она состоит из обратной косой черты и шестнадцатеричного значения символа в Unicode.

HTML

<ol>
  <li>Crack Eggs into bowl</li>
  <li>Add Milk</li>
  <li>Add Flour</li>
  <li aria-current="step">Mix thoroughly into a smooth batter</li>
  <li>Pour a ladleful of batter onto a hot, greased, flat frying pan</li>
  <li>Fry until the top of the pancake loses its gloss</li>
  <li>Flip it over and fry for a couple more minutes</li>
  <li>serve with your favorite topping</li>
</ol>

CSS

li {
  padding: 0.5em;
}

li[aria-current="step"] {
  font-weight: bold;
}

li[aria-current="step"]::before {
  content: "\21E8 "; /* Unicode escape sequence for "Rightwards White Arrow" */
  display: inline;
}

Результат

Вложенные псевдоэлементы ::before::marker

Вложенный псевдоэлемент ::before::marker выбирает маркер списка ::marker псевдоэлемента ::before, который сам является элементом списка, то есть его свойство display имеет значение list-item.

В этом примере мы добавляем дополнительные элементы списка перед и после меню навигации, используя ::before и ::after (задавая им значение display: list-item, чтобы они вели себя как элементы списка). Затем мы используем ul::before::marker и ul::after::marker, чтобы задать маркерам списка другой цвет.

HTML

<ul>
  <li><a href="#">Introduction</a></li>
  <li><a href="#">Getting started</a></li>
  <li><a href="#">Understanding the basics</a></li>
</ul>

CSS

ul {
  font-size: 1.5rem;
  font-family: "Helvetica", "Arial", sans-serif;
}

ul::before,
ul::after {
  display: list-item;
  color: orange;
}

ul::before {
  content: "Start";
}

ul::after {
  content: "End";
}

ul::before::marker,
ul::after::marker {
  color: red;
}

Результат

Маркеры трёх навигационных пунктов отображаются, поскольку они являются элементами <li>. Элементы «Начало» и «Конец» добавлены с помощью псевдоэлементов, а для оформления их маркеров используется ::marker.

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

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

См. также

• ::after
• content