Справочник HTML & CSS

content

Содержимое псевдоэлементов `::before` и `::after`.

Синтаксис

content: "text";

Значения

Параметр	Тип	Описание
"text"	string	Строка в кавычках.
""	string	Пустое содержимое — псевдоэлемент существует, например как декоративная фигура.
attr()	function	Значение атрибута элемента: `attr(title)`.
counter()	function	Значение счётчика CSS.

Примеры

Текст и значение атрибута:

<style>
  .price::before { content: "$"; }
  abbr[title]::after { content: " (" attr(title) ")"; color: gray; }
</style>
 
<p class="price">25</p>
<p><abbr title="HyperText Markup Language">HTML</abbr></p>

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

<style>
  ol { list-style: none; counter-reset: step; padding: 0; }
  li { counter-increment: step; }
  li::before { content: "Step " counter(step) ": "; font-weight: bold; }
</style>
 
<ol><li>Open the box</li><li>Plug it in</li><li>Turn it on</li></ol>

Примечания

Сгенерированный текст нельзя выделить и скопировать, и экранные чтецы могут его пропустить. Используйте его для украшений и подсказок, а не для важного содержимого.

См. также

::before — Создаёт виртуальный первый дочерний элемент — для декоративного текста или фигур.
::after — Создаёт виртуальный последний дочерний элемент — для значков, пометок и украшений после содержимого.
::marker — Маркер или номер пункта списка.
counter() — Выводит значение CSS-счётчика в `content`; `counters()` выводит сразу все вложенные уровни, например 2.1.3.

Вопросы и ответы по теме

В учебнике

Псевдоэлементы — Как оформить часть элемента или добавить декоративное содержимое — before, after, first-letter, marker, placeholder и selection.

Спасибо, что читаете!