CSS-свойство content

CSS-свойство content используется в сочетании с псевдоэлементами ::before и ::after для генерации контента в элементе.

Значение по умолчанию:	`normal`
Применяется к:	`::before` и `::after` псевдо-элементы
Наследование:	Нет
Анимирование:	Нет. Анимируемые свойства
Версия:	CSS 2, 3

Синтаксис

Синтаксически свойства задаются по следующему шаблону:

content: normal | none | counter | string | url(url) | attr(attribute) | open-quote | close-quote | no-open-quote | no-close-quote | initial | inherit

Примеры написания кода свойства content:

h1::before {
    content: "Chapter: ";
    display: inline;
}

CSS-свойство display определяет, будет ли содержимое, сгенерированное с использованием свойства content, помещено в block-box или inline-box.

Значения свойств

В следующей таблице описаны значения этого свойства.

Значение	Описание
`normal`	Пустой контент для `::before` и `::after` псевдо-элементов. Это значение установлено по умолчанию.
`none`	Псевдоэлемент не генерируется.
`counter`	Это значение устанавливает `content` в качестве счетчика. См. свойство `counter-reset` и `counter-increment`.
string	Вставляет указанную строку (текстовое содержимое).
`url(url)`	Значение `url()` обозначает внешний ресурс (например, изображение). Если ресурс или изображение не может быть отображено, оно либо игнорируется, либо появляется какой-либо заполнитель.
`attr(attribute)`	Эта функция вставляет значение указанного атрибута до или после выбранного элемента (ов). Если субъект селектора не имеет указанного атрибута, будет вставлена пустая строка. Имена атрибутов не должны быть заключены в кавычки.
`open-quote`	Вставляет начальную кавычку. Эти значения заменяются соответствующей строкой из свойства `quotes`.
`close-quote`	Вставляет закрывающую кавычку. Эти значения заменяются соответствующей строкой из свойства `quotes`.
`no-open-quote`	Не отображать начальную кавычку, но увеличивает (уменьшает) уровень вложенности для кавычек.
`no-close-quote`	Не отображать закрывающую кавычку, но увеличивает (уменьшает) уровень вложенности для кавычек.
`initial`	Устанавливает это свойство в значение по умолчанию.
`inherit`	Если указан, связанный элемент принимает вычисленное значение своего родительского элемента `content`.