Свойство content

Описание

Позволяет вставлять генерируемое содержание в текст веб-страницы, которое первоначально в тексте отсутствует.

Применяется совместно с псевдоэлементами ::after и ::before.

Синтаксис

content: строка | attr(атрибут) | open-quote | close-quote | no-open-quote | no-close-quote | url | counter | normal | none;
Значение Описание
строка Текст, который добавляется на веб-страницу. Строка должна браться в двойные или одинарные кавычки.

Допускается использовать юникод для вставки спецсимволов.
Спецсимволы HTML которые начинаются с амперсанда, будут отображаться как есть, т.е. простым текстом.
attr(атрибут) Возвращает строку, которая является значением атрибута тега указанного в скобках. Например, a::after {content:attr(href)} добавит после ссылки её адрес, т. е. значение атрибута href. Если указанного атрибута нет, то вернётся пустая строка.
open-quote Вставляет открывающую кавычку, тип которой устанавливается с помощью стилевого свойства quotes.
close-quote Вставляет закрывающую кавычку.
no-open-quote Отменяет добавление открывающей кавычки.
no-close-quote Отменяет добавление закрывающей кавычки.
url Абсолютный или относительный адрес вставляемого объекта.

Если указанный файл браузер не может отобразить, то значение игнорируется.
counter Выводит значение счётчика, заданного свойством counter-reset.
none Не добавляет никакого содержимого.
normal Задаётся как none для псевдоэлементов ::before и ::after. Используется по умолчанию.

Пример

<!DOCTYPE html>
<html lang='ru'>
<head>
<meta charset='UTF-8'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<title>Document</title>
</head>
<body>
<style>
.top::before {
content: '(●◡●) ';
}
</style>
<p class='top'>Свойство content - это круто!</p>
</body>
</html>

Свойство content - это круто!

Читайте также