CSS свойство content
CSS свойство content позволяет вставлять генерируемое содержание, отсутствующее первоначально в тексте, в web-страницу.
Это свойство применяется совместно с псевдоэлементами ::after и ::before, которые указывают где отображать новое содержимое - после или до элемента, к которому добавляются.
Краткая информация по CSS-свойству content
Значение по умолчанию | Пустая строка |
Наследуется | Нет |
Применяется | К псевдоэлементам ::after и ::before |
Правила написания свойства content
content: <строка> | attr(<атрибут>) | open-quote
| close-quote | no-open-quote | normal | none
| no-close-quote | url | counter
<строка> - текст, который добавляется на web-страницу, при этом строка должна браться в двойные или одинарные кавычки. Для вставки спецсимволов допускается использовать юникод. Спецсимволы HTML, которые начинаются с амперсанда (например, §
), будут отображаться как есть, т. е. ввиде текста (§
, а не §
).
attr(<атрибут>) - возвращает строку, которая является значением атрибута тега указанного в скобках. Например, a::after {content:attr(href)}
добавит после ссылки ее адрес, т. е. значение атрибута href. Если же указанного атрибута нет, то вернется пустая строка.
open-quote - вставляет открывающую кавычку, тип которой устанавливается с помощью CSS свойства quotes.
close-quote - вставляет закрывающую кавычку.
no-open-quotes - отменяет добавление открывающей кавычки.
no-close-quote - отменяет добавление закрывающей кавычки.
url - абсолютный или относительный адрес вставляемого объекта. Если же указанный файл браузер не может отобразить, то это значение игнорируется.
counter - выводит значение счетчика, заданного CSS свойством counter-reset.
none - не добавляет никакого содержимого.
normal - задается как none для ::after и ::before.
Объектная модель
Объект.style.content
Пример применения свойства content
Проиллюстрируем работу content. Давайте сделаем чтобы после ссылки были фигурные кавычки.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS свойство content</title>
<style>
a { color: #c75050; }
a:after { content:"»"; }
</style>
<head>
<body>
<p>
В тот же миг Алиса юркнула за ним следом,
не думая о том, как же она будет выбираться
обратно. <a href="">Читать</a>
</p>
</body>
</html>