Свойство 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>Читайте также
Свойство border-radius
Устанавливает радиус скругления уголков рамки. Если рамка не задана, то скругление также происходит и с фоном.
Можно использовать от1 до 4 знач...
Свойство padding
Устанавливает расстояние от внутреннего края рамки элемента до воображаемого прямоугольника....
Свойство backdrop-filter
Позволяет использовать визуальные эффекты. Так как это применяется ко всему за элементом, чтобы увидеть эффект, вы должны сделать элемент или его фон ...
currentColor
Ключевое слово color для текущего элемента. Это позвол...