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

Псевдоэлемент CSS ::before создаёт генерируемый элемент, который вставляется как первый дочерний элемент целевого элемента — перед его реальным содержимым. Это один из двух псевдоэлементов «генерируемого содержимого» (его зеркальным аналогом является ::after), и чаще всего он используется для добавления декоративных иконок, меток, счётчиков, кавычек или визуальных украшений без изменения HTML.

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

Как работает `::before`

Псевдоэлемент ::before отображается только при наличии объявленного свойства content — именно его значение и вставляется. Без content ничего не появится (даже пустой блок).

Ключевые особенности:

По умолчанию является строчным. Как и <span>, он располагается строчно вместе с окружающим текстом, пока вы не измените его свойство display (например, на inline-block или block).
Это настоящий блок. Вы можете стилизовать его, анимировать, позиционировать или обтекать, как любой другой элемент; он наследует стили от элемента, которому принадлежит.
Вставляется первым. ::before вставляется перед содержимым элемента; ::after — после него. Оба располагаются внутри элемента, между его тегами.
Одинарное двоеточие также работает. Устаревший синтаксис :before (с одним двоеточием) эквивалентен и использовался в очень старых браузерах. Двойное двоеточие ::before — современный стандарт, который отличает псевдоэлементы от псевдоклассов; предпочтительнее использовать его.

Информация

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

Синтаксис

selector::before {
  content: "value"; /* required */
  /* other declarations */
}

Значением content может быть строковый литерал, изображение (url(...)), значение атрибута (attr(...)) или счётчик (используется вместе с counter-increment). Для чисто декоративного блока без текста используйте пустую строку: content: "".

Примеры

Вставка текстовой метки перед содержимым

Здесь ::before добавляет фиксированную строку перед каждым абзацем:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p::before { 
        content: "  William Shakespeare -";
      }
    </style>
  </head>
  <body>
    <h2>::before selector example</h2>
    <p>"Be or not to be".</p>
  </body>
</html>

Попробуйте сами »

Вставленный текст "William Shakespeare -" появляется непосредственно перед цитатой, хотя его нигде нет в HTML.

Стилизация генерируемого блока

Поскольку псевдоэлемент является блоком, вы можете задать ему фон, рамку и значение display, как у обычного элемента:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p::before { 
        content: "William Shakespeare-";
        display: inline-block;
        background-color: #ccc;
        color: #666;
        border: 2px dotted #000;
      }
    </style>
  </head>
  <body>
    <h2>::before selector example</h2>
    <p>"Be or not to be".</p>
  </body>
</html>

Попробуйте сами »

Распространённые варианты использования

::before незаменим, когда нужно добавить оформление, не относящееся к разметке:

Иконки и маркеры — вставьте символ (content: "★") или изображение через url() перед ссылками, пунктами списка или кнопками.
Маркеры обязательных полей — добавьте красную звёздочку к меткам: label.required::before { content: "*"; color: red; }.
Открывающие кавычки — оборачивайте блоки цитат типографскими кавычками.
Счётчики — используйте вместе с counter-increment для автоматической нумерации разделов.
Получение значений из атрибутов — отображайте собственный атрибут элемента с помощью attr():

abbr[title]::before {
  content: attr(title) ": ";
  font-weight: bold;
}

Доступность и подводные камни

content обязателен. Если вы забудете его указать, псевдоэлемент не будет сгенерирован вовсе.
Декоративным блокам нужен content: "". Для чисто визуального элемента (разделителя, фона иконки) укажите пустую строку, чтобы блок всё равно отображался.
Генерируемый текст нельзя выделить, и большинство программ чтения с экрана либо игнорируют его, либо воспроизводят непоследовательно. Никогда не помещайте в ::before информацию, которая обязательно должна дойти до пользователя (например, важные инструкции).
Не применяется к замещаемым элементам (<img>, <input>, <br> и т. д.).
Важна точка вставки. ::before — это первый дочерний элемент внутри элемента, а не перед его открывающим тегом.

Примечание

Для чисто декоративных псевдоэлементов всегда устанавливайте content: '', чтобы обеспечить их корректное отображение во всех браузерах.

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

::before поддерживается во всех современных браузерах. Форма с одинарным двоеточием (:before) также широко поддерживается и использовалась до появления CSS3 — применяйте её только при необходимости поддержки очень старых браузеров.

Связанные материалы

::after — вставка содержимого после элемента.
content — свойство, определяющее, что вставляет ::before.
counter-increment — создание автоматической нумерации с помощью генерируемого содержимого.
position — точное позиционирование генерируемого элемента.

Практика

Что делает псевдоэлемент '::before' в CSS?

Он вставляет содержимое перед содержимым выбранного элемента.Он скрывает содержимое перед выбранным элементом.Он изменяет цвет выбранного элемента.Он используется для стилизации выбранного элемента до применения любых других стилей.

Как работает ::before