Авторы специфицируют стиль и размещение генерируемого содержимого с помощью псевдоэлементов :before и :after. Как видно из их имён, псевдоэлементы :before и :after специфицируют размещение содержимого до и после содержимого дерева документа элемента. Свойство 'content' в соединении с этими псевдоэлементами специфицирует, что же будет вставлено.
Пример(ы):
Следующее правило вставляет строку "Note: " перед содержимым каждого элемента P, чей атрибут "class" имеет значение "note":
P.note:before { content: "Note: " }Форматирующие объекты (напр., боксы), генерируемые элементом, включают генерируемое содержимое. Так, например, изменение вышеприведённой таблицы стилей:
P.note:before { content: "Note: " } P.note { border: solid green }вызовет появление сплошной зелёной рамки вокруг параграфа, включая начальную строку.
Псевдоэлементы :before и :after наследуют любые наследуемые свойства из тех элементов дерева документа, к которым они присоединены.
Пример(ы):
Следующие правила вставляют открывающий знак кавычек перед каждым элементом 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':
Примечание. Другие значения могут быть допущены в будущих уровнях CSS.