Следующие правила вставляют открывающий знак кавычек перед каждым элементом Q. Цвет знака кавычки - красный, но шрифт будет тот же, что и шрифт остальной части элемента Q:
Q:before { content: open-quote; color: red }
В объявлениях псевдоэлементов :before или :after ненаследуемые свойства получают свои начальные значения.
Так, например, поскольку начальное значение свойства 'display' - 'inline', кавычка в предыдущем примере вставляется как инлайн-бокс (т.е. на той же самой строке, что и содержимое начального текста элемента). В следующем примере свойство 'display' явно устанавливается в 'block', так что вставленный текст становится блоком:
BODY:after { content: "The End"; display: block; margin-top: 2em; text-align: center; }
Обратите внимание, что пользователи аудио-ПА услышат слова "The End" после вывода оставшейся части содержимого BODY.
ПА обязаны игнорировать следующие свойства при наличии псевдоэлементов :before и :after : 'position', 'float', свойства списков и таблиц.
Псевдоэлементы :before и :after допускают значения свойства 'display':
[x].
Если субъект селектора является элементом уровня блока, допустимыми значениями будут 'none', 'inline', 'block' и 'marker'.
Если 'display' имеет другие значения, псевдоэлементы будут вести себя так, как если бы значение было 'block'.
[x].
Если субъект селектора является инлайн-элементом, допустимыми значениями будут 'none' и 'inline'.
Если 'display' имеет другие значения, псевдоэлементы будут вести себя так, как если бы значение было 'inline'.
Примечание. Другие значения могут быть допущены в будущих уровнях CSS.
'content'
Значение: [ | | | attr(X) | open-quote | close-quote | no-open-quote | no-close-quote ]+ | inherit
Начальное: пустая строка
Применяется: к псевдоэлементам :before и :after
Наследуется: нет
Процентное: N/A
Носитель: все
Это свойство используется с псевдоэлементами :before и :after для генерации содержимого документа.
Значения имеют следующий смысл:
Содержимое текста (см. раздел строки).
Значением является URI, обозначающий внешний ресурс. Если ПА не может поддержать данный ресурс (в связи с типами носителя), он может игнорировать данный ресурс.
Примечание.CSS2 не предлагает механизмов для изменения размеров внедрённого объекта или для предоставления его текстуального описания, подобных атрибутам "alt" или "longdesc" для изображений HTML. Это может быть изменено в будущих уровнях CSS.
Счётчики /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, возвращается пустая строка. Чувствительность к регистру имён атрибутов зависит от языка документа.
Примечание. В CSS2 невозможно обращаться к значениям атрибутов других элементов селектора.
Свойство 'display' регулирует, куда помещается содержимое, в блок, инлайн- или маркированный бокс.
Авторы должны поместить объявление 'content' в правила @media , если содержимое является медиа-чувствительным. Например, буквенный текст может использоваться для любой группы носителей, но изображения применяются только к медиа-группам visual + bitmap, а звуковые файлы применяются только к звуковым медиа-группам.
Следующее правило вызывает проигрывание звукового файла в конце отрезка с кавычками (см. дополнительные механизмы в разделе "звуковые таблицы стилей"):
@media aural { BLOCKQUOTE:after { content: url("beautiful-music.wav") } }
Следующее правило вставляет текст атрибута "alt" HTML перед изображением. Если изображение не выводится, пользователь увидит текст "alt".
IMG:before { content: attr(alt)}
Читать дальше