Хотя это может показаться нелепым, но в отличие от HTML CSS предоставляет средства для решения данных проблем.
С помощью CSS можно генерировать содержимое несколькими способами:
• с использованием свойства content в сочетании с псевдоэлементами: before и: after;
• с использованием элементов, свойство display которых принимает значение list-item.
Подробно рассмотрим все возможности CSS по генерации содержимого и начнем с использования свойства content.
Псевдоэлементы :before и: after
С помощью псевдоэлементов: before и: after можно задать стиль и местоположение генерируемого содержимого. Не требуется особых познаний в английском языке, чтобы из названия догадаться, что эти псевдоэлементы определяют местоположение «перед» и «после» содержимого элемента, принадлежащего дереву HTML-документа. Используя эти псевдоэлементы в сочетании со свойством content, вы можете определить содержимое и место, куда оно должно быть вставлено.
Рассмотрим простой пример. Пусть браузер сам расставит точки в конце абзацев в документе:
p:after { content: "." }
Надо помнить, что псевдоэлементы: before и: after могут быть связаны с элементом HTML-документа. Тогда они будут наследовать его свойства. Чтобы вы лучше разобрались, приведу такой пример:
p:before {
content: open-quote;
color: red
}
Теперь перед каждым элементом P будет добавлена кавычка красного цвета, а шрифт кавычки будет такой же, какой задан всему абзацу.
Свойство content
Это свойство используется вместе с псевдоэлементами: before и: after для генерации содержимого в документе. В примерах выше мы уже использовали это свойство. Теперь разберем его подробно.
Свойство content может принимать одно из нескольких значений: строку текста, URL-адрес документа, который должен быть вставлен, счетчик, кавычки либо значение атрибута. Вы можете создавать сложную вложенную строку, используя строку текста, счетчики, значения атрибутов элемента одновременно. При этом сложная строка должна быть разделена только пробелами, а не запятыми. Например:
content: "Рисунок " counter(imagenum) ". " attr(alt)
В документ может быть вставлена обычная текстовая строка, которая обязательно должна быть заключена в кавычки. Для примера добавим перед всеми абзацами надпись Абзац::
p:before { content "Абзац: " }
Вы также можете вставлять в генерируемое содержимое переходы на новую строку с помощью последовательности \A. Вставка данной последовательности приводит к принудительному разрыву строки, аналогичному тому, который получается при использовании элемента BR.
Скорректируем наш пример:
p:before {
content: "Абзац:\A"
}
Теперь перед каждым абзацем будет добавлена строка Абзац:, а сам абзац будет начинаться со следующей строки.
Рассмотрим вставку строки, которая является значением параметра элемента. На первый взгляд может показаться непонятным, где это можно использовать. Такая функция применяется, например, для вставки значения атрибута alt элемента IMG:
img:before { content: attr(alt) }
Если изображение не будет выведено, то читатель, по крайней мере, увидит текст атрибута alt, то есть название или описание рисунка.