Свойство 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>Читайте также
Класс
Классы применяют, когда необходимо определить стиль для одного или нескольких элементов веб-страницы. Элементы при этом могут быть разными, но иметь ч...
Правило @media
Правило @media позволяет указать тип носителя, для которого будет применяться указанный стиль. В качестве типов выступают различные устройства, наприм...
Свойство grid-column-start
Определяет размер ширины линий. Вы можете думать об этом, как о настройке ширины отступов между столбцами....
Свойство list-style-position
Указывает, как будет размещаться маркер относительно текста — маркер обтекается текстом или вынесен за границу элемента списка....