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> <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)Рекомендация

Браузеры

8121411
119.51

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

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

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