Исполняемые доки CSS: ::before и ::after

Q: Почему не отображается ::before или ::after?

Самая частая причина: нет свойства content, без него псевдоэлемент не создается. Для пустого декоративного блока используйте content: "". Другие причины: строчный псевдоэлемент с шириной и высотой (задайте ему display: block или inline-block) или элемент вроде или , который не может их содержать.

Q: Чем :before отличается от ::before?

По поведению ничем. ::before с двумя двоеточиями это современный синтаксис, который обозначает псевдоэлементы; :before с одним двоеточием это старое написание из CSS2, которое браузеры до сих пор принимают для before, after, first-line и first-letter.

Q: Озвучивают ли программы чтения с экрана содержимое ::before?

Как правило, да: текст из content обычно входит в доступное имя, но его нельзя выделить или скопировать. Храните настоящую информацию в HTML, а псевдоэлементы используйте для украшений и небольших визуальных подсказок.

Что делают ::before и ::after

::before вставляет блок первым дочерним элементом, а ::after последним дочерним элементом. Что будет в блоке, задает свойство content. В HTML ничего не добавляется: браузер генерирует это из CSS.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>before and after</title>
  <style>
    .price::before { content: "$"; color: #16a34a; }
    .price::after { content: " / month"; color: #6b7280; font-size: 14px; }
    .done::before { content: "✓ "; color: #16a34a; font-weight: bold; }
  </style>
</head>
<body>
  <p class="price">9</p>
  <p class="done">Tests pass</p>
</body>
</html>

В HTML есть только 9 и Tests pass. Знак доллара, подпись «/ month» и галочка появляются из CSS. Они наследуют стили элемента (шрифт, цвет), если их не переопределить, как в примерах выше.

Синтаксис

selector::before {
  content: "text";   /* required */
  /* any other styles */
}

selector::after {
  content: "";       /* empty string: a box with no text */
}

Значение `content`	Результат
`"text"`	Строка. `"\A"` дает перенос строки (с `white-space: pre`), `"\2192"` символ Unicode (→)
`""`	Пустой блок для фигур и украшений
`attr(data-label)`	Значение атрибута элемента
`counter(step)`	Значение CSS-счетчика
`open-quote` / `close-quote`	Кавычки для языка элемента
`none` или `normal`	Псевдоэлемента нет (`normal` по умолчанию)

content обязателен. Без него ::before и ::after не создаются, сколько бы других свойств вы им ни задали.

Декоративные фигуры с content: ""

С content: "" псевдоэлемент становится пустым блоком, которому можно задать размер и цвет. По умолчанию он строчный, а строчный блок игнорирует width и height, поэтому задайте ему display: block, inline-block или position: absolute:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Shapes</title>
  <style>
    .status::before {
      content: "";
      display: inline-block;
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: #16a34a;
      margin-inline-end: 8px;
    }
    .status.offline::before { background: #e5e7eb; }

    .heading::after {
      content: "";
      display: block;
      width: 48px;
      height: 4px;
      background: #2563eb;
      margin-top: 6px;
      border-radius: 2px;
    }
  </style>
</head>
<body>
  <h2 class="heading">Section title</h2>
  <p class="status">Online</p>
  <p class="status offline">Offline</p>
</body>
</html>

Позиционирование псевдоэлемента

Для украшения поверх элемента или вокруг него задайте псевдоэлементу position: absolute, а самому элементу position: relative, чтобы смещения отсчитывались от элемента:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Underline on hover</title>
  <style>
    .link {
      position: relative;
      color: #2563eb;
      text-decoration: none;
      font-size: 20px;
    }
    .link::after {
      content: "";
      position: absolute;
      left: 0;
      bottom: -4px;
      width: 100%;
      height: 2px;
      background: currentColor;
      transform: scaleX(0);
      transition: transform 0.25s;
    }
    .link:hover::after { transform: scaleX(1); }

    .card { position: relative; border: 2px solid #e5e7eb; padding: 16px; margin-top: 24px; }
    .card::before {
      content: "NEW";
      position: absolute;
      top: -12px;
      right: 12px;
      background: #f59e0b;
      padding: 2px 8px;
      font-size: 12px;
      border-radius: 4px;
    }
  </style>
</head>
<body>
  <a class="link" href="#">Hover this link</a>
  <div class="card">A card with a badge from ::before</div>
</body>
</html>

Обратите внимание на порядок при сочетании с псевдоклассом: сначала состояние, потом псевдоэлемент, .link:hover::after, но никогда .link::after:hover.

Чтение атрибутов через attr(): подсказка

attr() подставляет значение атрибута в content, поэтому одно правило показывает на каждом элементе свой текст:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Tooltip</title>
  <style>
    [data-tip] { position: relative; border-bottom: 1px dotted #2563eb; cursor: help; }
    [data-tip]::after {
      content: attr(data-tip);
      position: absolute;
      bottom: 125%;
      left: 0;
      background: #111827;
      color: white;
      padding: 4px 8px;
      border-radius: 4px;
      font-size: 13px;
      white-space: nowrap;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.2s;
    }
    [data-tip]:hover::after { opacity: 1; }
    p { margin-top: 48px; }
  </style>
</head>
<body>
  <p>Hover <span data-tip="HyperText Markup Language">HTML</span> or
     <span data-tip="Cascading Style Sheets">CSS</span>.</p>
</body>
</html>

Подсказка только по наведению невидима для пользователей клавиатуры и сенсорных экранов. Все важное размещайте на странице или показывайте еще и по :focus, добавив элементу tabindex="0".

Нумерация счетчиками

CSS-счетчики и ::before нумеруют элементы без ручного ввода чисел:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Counters</title>
  <style>
    .steps { counter-reset: step; padding: 0; }
    .steps li { list-style: none; counter-increment: step; margin: 8px 0; }
    .steps li::before {
      content: counter(step);
      display: inline-block;
      width: 24px;
      height: 24px;
      line-height: 24px;
      text-align: center;
      border-radius: 50%;
      background: #2563eb;
      color: white;
      margin-inline-end: 8px;
    }
  </style>
</head>
<body>
  <ol class="steps">
    <li>Write the HTML</li>
    <li>Add the CSS</li>
    <li>Open it in a browser</li>
  </ol>
</body>
</html>

Добавьте или удалите шаг, и номера обновятся сами.

Где ::before и ::after не работают

Псевдоэлементы вставляются внутрь элемента, между его тегами. Элементы, у которых нет «внутри», не могут их показать:

<img>, <video>, <iframe> (замещаемые элементы)
<input>, <select>, <textarea> (элементы форм) и <br>

Некоторые браузеры рисуют их на чекбоксе или битом изображении, но это непоследовательно. Повесьте псевдоэлемент на обертку: <span class="field"><input></span> и оформите .field::after.

Частые ошибки

Нет content. Самая частая причина, почему ничего не видно. Добавьте content: "".
Размер у строчного псевдоэлемента. width и height не работают, пока не задан display: block, inline-block или position: absolute.
Неправильный порядок с состоянием. a:hover::after работает, a::after:hover нет.
Абсолютное позиционирование без позиционированного родителя. Тогда псевдоэлемент выравнивается по какому-то далекому предку. Добавьте элементу position: relative.
Настоящее содержимое в CSS. Текст в content нельзя выделить или скопировать. Храните информацию в HTML.

Часто задаваемые вопросы

Что делает ::before в CSS?

Создает псевдоэлемент, который становится первым дочерним элементом выбранного элемента и заполняется тем, что указано в свойстве content. ::after делает то же самое как последний дочерний элемент. В HTML их нет, поэтому они удобны для иконок, подписей и украшений.

Почему не отображается ::before или ::after?

Самая частая причина: нет свойства content, без него псевдоэлемент не создается. Для пустого декоративного блока используйте content: "". Другие причины: строчный псевдоэлемент с шириной и высотой (задайте ему display: block или inline-block) или элемент вроде <img> или <input>, который не может их содержать.

Чем :before отличается от ::before?

По поведению ничем. ::before с двумя двоеточиями это современный синтаксис, который обозначает псевдоэлементы; :before с одним двоеточием это старое написание из CSS2, которое браузеры до сих пор принимают для before, after, first-line и first-letter.

Можно ли использовать ::before на img или input?

Надежно нельзя. Псевдоэлементы вставляются внутрь содержимого элемента, а у замещаемых элементов вроде <img> и элементов форм вроде <input> нет для них области содержимого. Оберните элемент в <span> или <div> и повесьте псевдоэлемент на обертку.

Озвучивают ли программы чтения с экрана содержимое ::before?

Как правило, да: текст из content обычно входит в доступное имя, но его нельзя выделить или скопировать. Храните настоящую информацию в HTML, а псевдоэлементы используйте для украшений и небольших визуальных подсказок.

Связанные концепции