Генерируемое содержимое, автоматическая нумерация и списки

Свойство 'content'

'content'

Значение: [ <string> | <uri> | <counter> | attr(X) | open-quote | close-quote | no-open-quote | no-close-quote ]+ | inherit

Начальное: пустая строка

Применяется: к псевдоэлементам :before и :after

Наследуется: нет

Процентное: N/A

Носитель: все

Это свойство используется с псевдоэлементами :before и :after для генерации содержимого документа.

Значения имеют следующий смысл:

<string>

Содержимое текста (см. раздел "Синтаксис CSS2 и базовые типы данных" ).

<uri>

Значением является URI, обозначающий внешний ресурс. Если ПА не может поддержать данный ресурс (в связи с типами носителя), он может игнорировать данный ресурс.

<counter>

Счётчики /Counters могут быть специфицированы двумя различными функциями: 'counter()' или 'counters()'. Первая имеет две формы: 'counter(name)' или 'counter(name, style)'. Генерируемый текст является значением именованного счётчика от этой точки в структуре форматирования; он форматируется в указанном стиле (по умолчанию - 'decimal'). Вторая функция имеет также две формы: 'counters(name, string)' или 'counters(name, string, style)'. Генерируемый текст является значениями всех счётчиков с данным именем от этой точки в структуре форматирования, разделёнными специфицированной строкой. Счётчики выводятся в указанном стиле(по умолчанию - 'decimal'). См. раздел автоматические счётчики и нумерация.

open-quote и close-quote

Эти значения замещаются подходящей строкой свойства 'quotes'.

no-open-quote и no-close-quote

Ничего не вставляют (пустая строка), но увеличивают (уменьшают) уровень вложения кавычек.

attr(X)

Эта функция возвращает строковое значение X для субъекта селектора. Строка не разбирается процессором CSS. Если субъект селектора не имеет атрибута X, возвращается пустая строка. Чувствительность к регистру имён атрибутов зависит от языка документа.

Свойство 'display' регулирует, куда помещается содержимое, в блок, инлайн- или маркированный бокс.

Авторы должны поместить объявление 'content' в правила @media, если содержимое является медиа-чувствительным. Например, буквенный текст может использоваться для любой группы носителей, но изображения применяются только к медиа-группам visual + bitmap, а звуковые файлы применяются только к звуковым медиа-группам.

Следующее правило вызывает проигрывание звукового файла в конце отрезка с кавычками (см. дополнительные механизмы в разделе "звуковые таблицы стилей"):

@media aural {
   BLOCKQUOTE:after { content: url("beautiful-music.wav") }
   }

Следующее правило вставляет текст атрибута "alt" HTML перед изображением. Если изображение не выводится, пользователь увидит текст "alt".

IMG:before { content: attr(alt)}

Авторы могут включать новые строки в генерируемое содержимое путём ввода escape-последовательности "\A" в одной из строк после свойства 'content'. Это вставляет форсированный обрыв строки, подобно элементу BR в HTML. См. дополнительную информацию об escape-последовательности "\A" в разделах "Синтаксис CSS2 и базовые типы данных" и "Синтаксис CSS2 и базовые типы данных" .

H1:before {
    display: block;
    text-align: center;
    content: "chapter\A hoofdstuk\A chapitre"
}

Генерируемое содержимое не изменяет дерево документа. Обычно оно не передаётся обратно процессору языка документа (например, для повторного разбора).