content

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

Иллюстрация ниже показывает пример страницы с заголовком. На следующем изображении мы видим, как при помощи свойства content перед заголовком вставлен текст.


Пример

h2:before {content: 'Chapter: '}

Возможные значения

"cтрока"
Текстовая строка в одинарных или двойных кавычках.
none
Нет никаких вставок текста.
normal
Значение аналогично none.
uri
Ссылка на изображение, оформленная соответствующим образом.
counter
Создает счетчик с помощью свойств counter() or counters().
attr(имя_атрибута)
Возвращает строку, которая является значением атрибута элемента, указанного в скобках. Например:
 a.ext:after {content: " (" attr(href) ")";}
open-quote
Вставляет открывающую кавычку, тип которой задается с помощью свойства quotes
close-quote
Вставляет закрывающую кавычку, тип которой задается с помощью свойства quotes
no-open-quote
Открывающая кавычка не вставляется в то место, где она должна быть.
no-close-quote
Закрывающая кавычка не вставляется в то место, где она должна быть.
inherit
Заимствует значение свойства у родительского элемента.

Характеристики

Значение по умолчанию: normal

Применяется: С псевдоселекторами :before и :after

Наследуется: Нет

См. также