Генерируемое содержимое

Здесь рассматривается применение псевдоклассов CSS :befor и :after для создания списков типа оглавления с нумерацией и др. элементами оформления, генерируемыми автоматически, а не указываемыми явно в тегах. Заодно здесь показано применение сложных CSS-селекторов.

С помощью CSS можно добавлять к элементам некоторое содержимое, изначально отсутствующее в теле документа, т.е. не заданное в качестве содержимого того или иного тега.
Например, заголовки глав книги не обязательно начинать со слова "Глава". Это слово, как и номер главы можно сгенерировать и добавить к содержимому элемента, например, <h1> при отображении документа. Содержимое, располагающееся до и после элемента, добавляется с помощью псевдоклассов CSS :before и :after соответственно, а его определение — с помощью параметра content. Например, если вы хотите добавить перед всеми заголовками первого уровня (элементами <h1>) слово "Раздел", то достаточно использовать такое правило: h1:before {content:"Раздел"}
Параметр content принимает следующие значения:

• строка — добавляемый текст, заключенный в кавычки; специальные символы представляются шестнадцатеричным кодом Unicode с обратным слэшем в качестве префикса; например, символ параграфа (§) представляется как \A7, символ доллара ($) — как \24;
• url(адрес) — URL-адрес вставляемого объекта; например, h1 {content:url("picture.jpg")} если браузер не может отобразить объект, то данный параметр просто игнорируется;
• attr(атрибут) — значение указанного атрибута элемента, к которому оно добавляется; например, для добавления к картинке ее адреса можно использовать правило img:after{attr(href)};
• open-quote — добавляет открывающую кавычку, тип которой устанавливается с помощью параметра quotes; например, p:before {content:open-quote; quote: "<"}
• close-quote — добавляет закрывающую кавычку, тип которой устанавливается с помощью параметра quotes;
• no-open-quotes — отменяет добавление открывающей кавычки (приме-няется для тех элементов, которые автоматически добавляют кавычки к содержащемуся внутри них тексту);
• no-close-quote — отменяет добавление закрывающей кавычки.

В качестве значения параметра content можно указать сразу несколько из перечисленных, разделяя их пробелами. Кроме того, параметр content может принимать в качестве значения функцию counters() вычисления значения счетчика для автоматической нумерации элементов, но об этом далее.
Чтобы перед элементами <h1>(заголовками 1-го уровня), например, добавить в качестве генерируемого содержимого картинку с изображением буквы "Г" из файла g.jpg, текст "лава" и вычисляемый номер элемента, за которым следует точка и пробел, достаточно задать следующее CSS-правило:

h1:before {
  content: url("g.jpg") "лава" counters(item, "") ". ";
  counter-increment:item
}

В результате все элементы <h1> в вашем документе будут отображать перед собственным содержимым заданные картинку и текст, а также вычисляемый порядковый номер.

Теперь рассмотрим в качестве примера создание двухуровневого оглавления книги. Структура оглавления размечена тегами <div> и <span>. Разумеется, можно было бы использовать и другие теги, например, теги задания списков (<ul> и т.п.). В данном примере я хотел лишь продемонстрировать применение псевдоклассов CSS для универсальных блокового и внутристорчного теов <div>и <span>.
Названия глав и параграфов заключены в контейнеры <span>, отображаемые в блочном виде (display:block). Обратите внимание на разметку оглавления, обеспечивающую его многоуровневость. Параграфы, относящиеся к одной главе, заключены в тег <div>, который включается в тег <span>, соответствующий данной главе. В свою очередь теги <span> для глав включены в общий <div> самого верхнего уровня. Первая буква в слове "Глава" — графическое изображение, а символ параграфа представлен в Unicode как \A7. Нумерация элементов оглавления отражает его иерархическую структуру. Чтобы элементы номера разделялись точкой, применено значение counters(item,".") параметра contents.

Пример текста с генерируемым содержимым (вид в браузере)

Что такое HTML и CSS

Языки разметки Таблицы стилей

Структура HTML-документа

Определение типа документа Структура собственно документа Разделы документа

Основы CSS Позиционирование с помощью CSS

Внимание!

Следует иметь в виду, что пользователь браузера не может выделить содержимое, генерируемое посредством CSS. Его нельзя найти средствами поиска и скопировать в буфер обмена.

Далее приведены CSS- и HTML-коды для данного примера.