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

синтаксис

content: <строка> | attr(<атрибут>) | open-quote | close-quote
| no-open-quote | no-close-quote | url | counter | normal | none
				

Значения

<строка>Текст, который добавляется на веб-страницу, строка при этом должна браться в двойные или одинарные кавычки. Допускается использовать юникод для вставки спецсимволов. Спецсимволы HTML которые начинаются с амперсанда (§ например), будут отображаться как есть, т. е. простым текстом (§, а не §).

attr(<атрибут>) Возвращает строку, которая является значением атрибута тега указанного в скобках. Например, a::after {content:attr(href)} добавит после ссылки её адрес, т. е. значение атрибута href. Если указанного атрибута нет, вернётся пустая строка.

open-quote Вставляет открывающую кавычку, тип которой устанавливается с помощью стилевого свойства quotes.

close-quote Вставляет закрывающую кавычку.

no-open-quotes Отменяет добавление открывающей кавычки.

no-close-quote Отменяет добавление закрывающей кавычки.

url Абсолютный или относительный адрес вставляемого объекта. Если указанный файл браузер не может отобразить, то значение игнорируется.

counter Выводит значение счётчика, заданного свойством counter-reset.

none Не добавляет никакого содержимого.

normal Задаётся как none для псевдоэлементов ::before и ::after.

Поддержка