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.

Поддержка браузеров

Свойство content поддерживается во всех основных браузерах.

Internet Explorer 7 и более ранние версии не поддерживают свойство content. IE8 поддерживает, только если указан правильный <!DOCTYPE>.

Читайте также

Насколько публикация полезна?

Нажмите на звезду, чтобы оценить!

Средняя оценка 5 / 5. Количество оценок: 1

Оценок пока нет. Поставьте оценку первым.