content

Обновлено: 26.05.2022

content

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

Краткая информация

Значение по умолчанию normal
Наследуется Нет
Применяется К псевдоэлементам ::before и ::after
Анимируется Нет

Синтаксис

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

Значения

<строка> Текст, который добавляется на веб-страницу, строка при этом должна браться в двойные или одинарные кавычки. Допускается использовать юникод для вставки спецсимволов. Спецсимволы HTML которые начинаются с амперсанда (&sect; например), будут отображаться как есть, т. е. простым текстом (&sect;, а не §).
attr(<атрибут>) Возвращает строку, которая является значением атрибута тега указанного в скобках. Например, a::after {content:attr(href)} добавит после ссылки её адрес, т. е. значение атрибута href. Если указанного атрибута нет, то вернётся пустая строка.
open-quote Вставляет открывающую кавычку, тип которой устанавливается с помощью стилевого свойства quotes.
close-quote Вставляет закрывающую кавычку.
no-open-quote Отменяет добавление открывающей кавычки.
no-close-quote Отменяет добавление закрывающей кавычки.
url Абсолютный или относительный адрес вставляемого объекта. Если указанный файл браузер не может отобразить, то значение игнорируется.
counter Выводит значение счётчика, заданного свойством counter-reset.
none Не добавляет никакого содержимого.
normal Задаётся как none для псевдоэлементов ::before и ::after.

Пример

Результат данного примера показан на рис. 1.

Рис. 1. Применение свойства content

Объектная модель

Объект.style.content

Примечание

Firefox до версии 2.0 включительно и Opera до версии 9.2 включительно не поддерживают значение none. Safari до версии 3.1 не поддерживает значение none и normal.

Chrome и Safari поддерживают свойство quotes для добавления кавычек с версии 11 и 5.1 соответственно.

Браузеры

content

Посмотреть совместимость на Can I use?

content