content

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

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

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

Синтаксис

content: <строка> | attr(<атрибут>) | open-quote | close-quote 
    | no-open-quote | no-close-quote | url | counter | normal | none
Описание Пример
<тип> Указывает тип значения. <размер>
A && B Значения должны выводиться в указанном порядке. <размер> && <цвет>
A | B Указывает, что надо выбрать только одно значение из предложенных (A или B). normal | small-caps
A || B Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке. width || count
[ ] Группирует значения. [ crop || cross ]
* Повторять ноль или больше раз. [,<время>]*
+ Повторять один или больше раз. <число>+
? Указанный тип, слово или группа не является обязательным. inset?
{A, B} Повторять не менее A, но не более B раз. <радиус>{1,4}
# Повторять один или больше раз через запятую. <время>#

Значения

<строка>
Текст, который добавляется на веб-страницу, строка при этом должна браться в двойные или одинарные кавычки. Допускается использовать юникод для вставки спецсимволов. Спецсимволы 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.

Пример

<!DOCTYPE html> <html lang="ru"> <head> <meta charset="utf-8"> <title>content</title> <style> .tag { color: navy; /* Цвет текста */ font-family: monospace; /* Моноширинный шрифт */ quotes: "<" ">"; /* Устанавливаем вид кавычек */ } .tag::before { content: open-quote; /* Добавляем перед текстом открывающую кавычку */ } .tag::after { content: close-quote; /* Добавляем после текста закрывающую кавычку */ } </style> </head> <body> <p>Элемент <span class="tag">DEL</span> используется для выделения текста, который был удалён в новой версии документа.</p> </body> </html>

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

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

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

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

Объект.style.content

Примечание

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

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

Спецификация

Спецификация Статус
CSS Level 2 (Revision 1) Рекомендация

Браузеры

8 12 1 4 1 1
1 1 9.5 1

В таблице браузеров применяются следующие обозначения.

  • — элемент полностью поддерживается браузером;
  • — элемент браузером не воспринимается и игнорируется;
  • — при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.

Число указывает версию браузреа, начиная с которой элемент поддерживается.
Контент