Вставка генерируемого содержимого

Для вставки генерируемого содержимого в документ применяются псевдоэлементы :before и :after. Они помещают перед содержимым элемента или после него генерируемое содержимое, заданное в виде свойства (как описано в следующем разделе). Пусть требуется перед каждой гиперссылкой вставить текст «(link)», чтобы обозначить гиперссылки при выводе. Это можно осуществить с помощью следующего правила:

a[href]:before {content: "(link)";}

Обратите внимание, что между генерируемым содержимым и содержимым элемента нет пробела. Дело в том, что в содержимое предыдущего примера пробел не входит. Объявление можно изменить, чтобы гарантировать, что между генерируемым и имеющимся содержимым будет пробел:

a[href]:before {content: "(link) ";}

Разница невелика, но очень важна. Аналогичным образом можно помещать маленький значок в конце ссылок на документы PDF. Правило может выглядеть примерно так:
a.pdf-doc:after {content: url(pdf-doc-icon.gif);}

Предположим, требуется продолжить оформление этих ссылок и окружить их рамкой. Правило такое:
a.pdf-doc {border: 1px solid gray;}

Обратите внимание, что рамка окружает и генерируемое содержимое.


Причина в том, что генерируемое содержимое размещается внутри блока элемента. В CSS2.1 нет возможности поместить никакое генерируемое содержимое, кроме маркеров списка, вне блока элемента. Может показаться, что позиционирование позволило бы добиться желаемого результата, но CSS2 и CSS2.1 специально запрещают перемещение или позиционирование содержимого элементов :before и :after. Свойства стилевого оформления списков, как и свойства таблиц, запрещены. Кроме того, действуют следующие ограничения:

• Если областью действия селекторов :before или :after является блочный элемент, свойство display может принимать только значения none, inline, block и marker. Все остальные значения интерпретируются как block.
• Если областью действия селекторов :before или :after является строковый элемент, свойство display может принимать только значения none и inline. Все остальные значения интерпретируются как inline.

Например:
em:after {content: " (!) "; display: block;}

Поскольку em – это строковый элемент, генерируемое содержимое не может стать блочным элементом. Следовательно, значение block заменяется значением inline. В следующем примере генерируемое содержимое становится блочным элементом, потому что целевой элемент также блочный:
h1:before {content: "New Section"; display: block; color: gray;}

У генерируемого содержимого есть интересная особенность: оно наследует значения от элемента, к которому прикрепляется.


Таким образом, в соответствии со следующими правилами, генерируемый текст будет зеленым, как и текст абзаца:

p {color: green;}
p:before {content: "::: ";}

Для того чтобы сделать генерируемый текст фиолетовым, достаточно простого объявления:

p:before {content: "::: "; color: purple;}

Подобное наследование значений происходит, конечно, только в наследуемых свойствах. Об этом следует помнить, поскольку такая реализация влияет на использование некоторых эффектов. Рассмотрим:

h1 {border-top: 3px solid black; padding-top: 0.25em;}
h1:before {content: "New Section"; display: block; color: gray;
border-bottom: 1px dotted black; margin-bottom: 0.5em;}

Генерируемое содержимое размещается внутри блока элемента h1, поэтому оно будет находиться под верхней рамкой элемента. Оно также размещается с учетом отступов.

Нижнее поле генерируемого содержимого, преобразованное в блочный элемент, сдвигает фактическое содержимое элемента вниз на 0,5 em. В любом случае эффект от применения генерируемого содержимого в этом примере – разделение элемента h1 на две части: блок генерируемого содержимого и блок фактического содержимого.


Дело в том, что для генерируемого содержимого задано display: block. Если изменить это объявление на display: inline, получится эффект:

h1 {border-top: 3px solid black; padding-top: 0.25em;}
h1:before {content: "New Section"; display: inline; color: gray;
border-bottom: 1px dotted black; margin-bottom: 0.5em;}

Заметьте, как размещаются рамки и как по-прежнему учитывается отступ сверху. То же происходит и с нижним полем генерируемого содержимого, но поскольку теперь генерируемое содержимое является строковым и, следовательно, поля не влияют на высоту строки, применение поля не имеет видимого эффекта. Определившись с основами генерируемого содержимого, посмотрим, как оно определяется фактически.

Оцените статью: (0 голосов)
0 5 0

Статьи из раздела CSS на эту тему:
Вставка значений атрибутов
Генерируемое содержимое
Генерируемые кавычки
Изображения для элементов списка
Компоновка списка