Свойство content

Свойство 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, то есть название или описание рисунка.

Хорошо разобраться с данным свойством помогут только эксперименты. Не пожалейте на них времени, и при разработке и обслуживании страниц оно вам с лихвой окупится.

Данный текст является ознакомительным фрагментом.