Свойство 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.
Поддержка
Internet explorer 8
Chrome 1
Opera 4
Safari 1
Firefox 1