ИНФОРМАЦИЯ,    ДИЗАЙН,    ПЕРЕВОДЫ,    РЕКЛАМА   .   .   .
w a p - с а й т
Информационный портал
Сегодня:  
admin@aranea.ru
+79068922256

  aranea.ru || Спецификация CSS2 | 12.1. Псевдо-элементы :before и :after.

В некоторых случаях авторы могут пожелать, чтобы устройства вывода визуализировали содержание, которое не имеет происхождения в дереве документа. Одним из известных примеров является пронумерованный список; когда авторы не хотят расставлять номера явно, он или она определяют условия, когда устройство вывода генерирует их автоматически. Таким же образом, авторы могут захотеть, чтобы устройство вывода вставляло слово "Figure" ("рисунок") перед названием рисунка, или "Chapter 7" ("Глава 7") перед заголовком седьмой главы. В частности, устройства вывода могут вставлять такие строки для аудио документов и документов брайля.

В CSS2 содержание можно генерировать несколькими механизмами:

  • Свойство 'content' вместе с псевдо-элементами :before и :after.
  • Звуковые свойства 'cue-before', 'cue-after' (смотрите главу по звуковым стилевым таблицам). Когда свойство 'content' комбинируется со звуковыми свойствами, то они интерпретируются в следующем порядке: :before, 'cue-before', ('pause-before'), содержание элемента, ('pause-after'), 'cue-after', и :after.
  • Элементы со значением 'list-item' для свойства 'display'.

Ниже мы описывает механизмы, связанные со свойством 'content'.

12.1. Псевдо-элементы :before и :after.

Авторы определяют стиль и место генерируемого содержания псевдо-элементами :before и :after. Как указывают их имена, :before ("перед") и :after ("после") определяют местоположение содержания перед и после содержания элемента в дереве документа. Свойство 'content' вместе с этими псевдо-элементами описывают, что вставляется.

Например, следующее правило вставляет строку "Note:" перед содержанием каждого элемента Р, чей атрибут "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.

← Назад | Вперед →
Copyright © 2006 -  aranea.ru