CSS. Каскадные таблицы стилей. Подробное руководство.Символ-Плюс 2008

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:1рх solid gray;}

Результат применения этих двух правил показан на рис. 12.12.

Обратите внимание, что рамка окружает и генерируемое содержимое, а на рис. 12*11 подчеркивание ссылки продолжается и под текстом 4(link)». Причина в том, что генерируемое содержимое размещается внутри блока элемента. В CSS2.1 нет возможности поместить никакое генерируемое содержимое, кроме маркеров списка, вне блока элемента.

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

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

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

inline.

Puc. 12.12. Генерирование значков