content
Обновлено: 08.12.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 которые начинаются с амперсанда (§ например), будут отображаться как есть, т. е. простым текстом (§, а не §). |
| 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. |
Пример
Объектная модель
Объект.style.content
Примечание
Firefox до версии 2.0 включительно и Opera до версии 9.2 включительно не поддерживают значение none. Safari до версии 3.1 не поддерживает значение none и normal.
Chrome и Safari поддерживают свойство quotes для добавления кавычек с версии 11 и 5.1 соответственно.