Вставка значений атрибутов

Иногда требуется сделать значение атрибута элемента частью представления документа. Например, можно поместить значение атрибута href каждой ссылки сразу после ссылок, как здесь:

a[href]:after {content: attr(href);}

В результате генерируемое содержимое вклинивается прямо в содержимое документа. Для улучшения внешнего вида документа можно добавить в объявление символьные строки:

a[href]:after {content: " [" attr(href) "]";}

Это полезно, например, для таблиц стилей, используемых при печати. В качестве генерируемого содержимого может быть введено любое значение атрибута: текст alt, значения class или id – все, что угодно. Автор мог бы сделать явной информацию о цитате для блока цитат:

blockquote:after {content: "(" attr(cite) ")"; display: block;
text-align: right; font-style: italic;}

В данном случае более сложное правило могло бы показать значения цвета текста и ссылки существующего документа:

body:before {content: "Text: " attr(text) " | Link: " attr(link)
" | Visited: " attr(vlink) " | Active: " attr(alink);
display: block; padding: 0.33em;
border: 1px solid black; text-align: center;}

Обратите внимание, что если атрибут отсутствует, то он замещается пустой строкой.


Предыдущий пример применяется к документу, у элемента body которого нет атрибута alink. Как видите, в документ вставляется текст «Active: » (включая пробел в конце строки), но после него ничего нет. Это удобно, если требуется вставить значение атрибута, только если он существует. CSS2.x определяет возвращаемое значение атрибута как не подлежащую синтаксическому разбору строку. Следовательно, если значение атрибута содержит разметку или спецсимволы, они будут отображаться буквально.

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

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