::before

Baseline Широко доступно

Эта функция хорошо зарекомендовала себя и работает на многих устройствах и версиях браузеров. Она доступна в браузерах с июля 2015 года.

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

Попробовать

Примечание: Псевдоэлементы, сгенерированные ::before и ::after — это блоки, сгенерированные так, как будто они являются непосредственными потомками элемента, к которому они применяются, или "элемента-источника". Следовательно, они не могут применяться к заменённым элементам, таким как <img>, контент которых находится вне области действия модели форматирования CSS.

Синтаксис

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

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

Примечание: Спецификация селекторов уровня 3 ввела двойное двоеточие ::before для различения псевдоклассов и псевдоэлементов. Браузеры также поддерживают одиночное двоеточие :before, введённое в CSS2.

Доступность

Использование псевдоэлемента ::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");
    }
  },
  false,
);

Вот работающий пример кода выше. Обратите внимание, что нет никаких иконок, а галочка — это фактически ::before , которая была стилизована в CSS. Смело добавляйте пункты в список.

Результат

Специальные символы

Поскольку это CSS, а не HTML, вы не можете использовать сущности разметки в значениях контента. Если вам нужно использовать специальный символ, и вы не можете ввести его напрямую в строку CSS контента, используйте последовательность 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"]::after {
  content: " \21E6"; /* Hexadecimal for Unicode Leftwards white arrow*/
  display: inline;
}

Результат

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

Спецификация
CSS Pseudo-Elements Module Level 4 # generated-content

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

	Рабочий стол					Мобильный
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на iOS	Samsung Internet	WebView Android
`::before`	11	1212	1.5 ["До Firefox 57 в Firefox была ошибка, из-за которой псевдоэлементы `::before` все ещё генерировались, даже если значение свойства `content` было установлено на `normal` или `none`.", "До Firefox 3.5 поддерживалось только поведение CSS уровня 2 псевдоэлементов `:before`, что исключало поддержку `position`, `float`, `list-style-*` и некоторых `display` свойств."] 1	74	44	1818	4 До Firefox 57 в Firefox была ошибка, из-за которой псевдоэлементы `::before` все ещё генерировались, даже если значение свойства `content` было установлено на `normal` или `none`. 4	10.110.1	33	1.01.0	≤37≤37
`animation_and_transition_support`	26	12	4	15	7	26	4	14	7	1.5	4.4

См. также

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/::before