Псевдоэлементы before и after
12.1 Псевдоэлементы :before и :after
Авторы специфицируют стиль и размещение генерируемого содержимого с помощью псевдоэлементов :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':
- Если субъект селектора является элементом уровня блока, допустимыми значениями будут 'none', 'inline', 'block' и 'marker'.
Если 'display' имеет другие значения, псевдоэлементы будут вести себя так, как если бы значение было 'block'. - Если субъект селектора является инлайн-элементом, допустимыми значениями будут 'none' и 'inline'.
Если 'display' имеет другие значения, псевдоэлементы будут вести себя так, как если бы значение было 'inline'.
Примечание. Другие значения могут быть допущены в будущих уровнях CSS.
5.12.3 Псевдоэлементы :before и :after
Псевдоэлементы ':before' и ':after' можно использовать для вставки генерируемого содержимого до или после содержимого элемента. Они разъясняются в разделе генерируемый текст.
Пример(ы):
H1:before {content: counter(chapno, upper-roman) ". "}Если псевдоэлементы :first-letter и :first-line сочетаются с :before и :after, то они применяются к первой букве или строке элемента, включая вставленный текст.
Пример(ы):
P.special:before {content: "Special! "} P.special:first-letter {color: #ffd800}Это выведет "S" в слове "Special!" золотом.
