CSS :: Свойство content
css-свойство content (от англ. content – содержимое) предназначено для вставки генерируемого контента, который первоначально в тексте веб-страницы отсутствует. Свойство используется совместно с псевдоэлементами ::after и ::before, которые, соответственно, указывают, куда следует вставлять контент – до или после указанного в селекторе элемента.
Характеристики
- Значение по умолчанию: normal.
- Применяется: к псевдоэлементам ::before и ::after.
- Наследуется: нет.
- Анимируется: нет.
- JavaScript: object.style.content="value".
Синтаксис
content: "<строка>" | attr(<атрибут>) | open-quote | close-quote | no-open-quote | no-close-quote | url | counter | normal | none
Значения
- attr(имя_атрибута) – значение переданного функции attr() атрибута будет добавлено в текст веб-страницы.
- "строка" – указанная в кавычках строка будет добавлена в текст веб-страницы.
- url("path") – указанный объект (видеофайл, аудиофайл и т.д.) будет добавлен на веб-страницу.
- open-quote – браузер установит открыващие кавычки.
- close-quote – браузер установит закрыващие кавычки.
- no-open-quote – браузер удалит открывающие кавычки, установленные при помощи open-quote.
- no-close-quote – браузер удалит закрывающие кавычки, установленные при помощи close-quote.
- normal – браузер отменит все вставки, которые были сделаны в элементе, т.е. вернет его в нормальное (первоначальное) состояние.
- none – браузер не добавит никакого контента.
- counter(id_счетчика) – браузер выведет нумерацию счетчика с указанным id (т.е. имя счетчика, установленное при помощи свойства counter-reset), при этом, если счетчик с таким id не был установлен, то браузер будет всегда выводить только нуль.
При использовании свойства content разрешается через пробел указывать сразу несколько значений свойства.
Ссылки
Официальный сайт W3C: https://drafts.csswg.org/css2/generate.html#propdef-content
Статья на Mozilla Firefox: https://developer.mozilla.org/ru/docs/Web/CSS/content
Примеры
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Пример №1</title> <style> /* Создаем счетчик для тела документа */ body{counter-reset: parag_1;} /* Создаем счетчик для заголовка «h2» */ h2{counter-reset: parag_2;} h2:before{ /* Считаем в элементе «body» все «h2» */ counter-increment: parag_1 1; /* Вставляем перед каждым «h2» контент: строка+текущее значение счетчика+строка */ content: "§" counter(parag_1) ". "; } h3:before{ /* Считаем в элементе «h2» все «h3» */ counter-increment: parag_2 1; /* Вставляем перед каждым «h3» контент: текущее значение счетчика parag_1+строка+ текущее значение счетчика parag_2+строка */ content: counter(parag_1) "." counter(parag_2) ". "; } </style> </head> <body> <h2>Введение в CSS</h2> <h3>Для чего нужен CSS?</h3> <h3>Синтаксис CSS.</h3> <h3>Подключение CSS к html-документу.</h3><br> <h2>Свойства CSS для текста и шрифта</h2> <h3>Оформление внешнего вида текста.</h3> <h3>Определение характеристик шрифтов.</h3> </body> </html>
Пример №1
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Пример №2</title> <style> .list_1{ width: 40%; margin-left: 20%; padding-left: 1rem; list-style: none; } .list_1 li{ position: relative; padding: 0.4rem; } /* Оформляем свои маркеры */ .list_1 li:before{ content: ""; display: inline-block; position: absolute; left: -0.7rem; top: 0.73rem; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: green; } </style> </head> <body> <ol class="list_1"> <li>Элемент списка</li> <li>Элемент списка</li> <li>Элемент списка</li> <li>Элемент списка</li> <li>Элемент списка</li> </ol> </body> </html>
Пример №2