О спецификации CSS2 том 2

       

Псевдоэлементы 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!" золотом.



Содержание раздела