CSS свойство content

Определение и применение

CSS свойство content используется с псевдоэлементами :before и :after для вставки сгенерированного контента.

Поддержка браузерами

Свойство	Chrome	Firefox	Opera	Safari	IExplorer	Edge
content	1.0	1.0	4.0	1.0	8.0*	12.0

CSS синтаксис:

content:"normal | none | counter | attr | string | open-quote | close-quote | no-open-quote | no-close-quote | url | initial | inherit";

JavaScript синтаксис:

Нет.

Значения свойства

Значение	Описание
normal	Отсутствие контента (устанавливается как none для псевдоэлементов :before и :after). Это значение по умолчанию.
none	Отсутствие контента.
counter	Устанавливает контент в качестве счетчика (добавляет значение определённого счетчика). Используется совместно со свойствами counter-reset и counter-increment
attr(attribute)	Вывод значения атрибута элемента в виде строки (содержание как значение атрибута элемента). Например, вывод значения атрибута href после тега <a> (a:after {content: " "attr(href)"";}. В результате между всеми тегами <a></a> автоматически будет проставляться значение атрибута href ).
string	Текстовая строка. Содержимое строки обязательно заключается в кавычки.
open-quote	Устанавливает открывающиеся кавычки. Вид кавычек может быть изменён свойством quotes.
close-quote	Устанавливает закрывающиеся кавычки. Вид кавычек может быть изменён свойством quotes.
no-open-quote	Удаляет открывающую кавычку от содержимого элемента, если она установлена свойством open-quote.
no-close-quote	Удаляет закрывающую кавычку от содержимого элемента, если она установлена свойством close-quote.
url(url)	Производит добавление к контенту один из видов медиа-файлов(например, изображение, звук, видео и т.д.).
initial	Устанавливает свойство в значение по умолчанию.
inherit	Указывает, что значение наследуется от родительского элемента.

Версия CSS

CSS2

Наследуется

Нет.

Анимируемое

Нет.

Пример использования

Изменение цвета маркера через использование CSS свойства content и псевдоэлемента :before:

<!DOCTYPE html>
<html>
<head>
<title> Пример CSS свойства content.</title>
<style> 
ul {
list-style : none; /* убираем маркеры у маркированного списка */
}
li:before {/* Псевдоэлемент :before добавляет содержимое, указанное в свойстве content перед каждым элементом <li> */
content : "•"; /* вставляем содержимое, которое выглядит как маркер */
padding-right : 10px; /* устанавливаем правый внутренний отступ элемента. */
color : red; /* устанавливаем цвет шрифта */
}
</style>
</head>
	<body>
		<ul>
			<li>Элемент списка</li>
			<li>Элемент списка</li>
			<li>Элемент списка</li>
		</ul>
	</body>
</html>

Пример использования счетчиков в CSS через использование CSS свойств content, counter-reset, counter-increment и псевдоэлемента :before:.

<!DOCTYPE html>
<html>
<head>
<title>Пример использования счетчиков в CSS.</title>
<style> 
body {
counter-reset : schetchik1; /* инициализируем счетчик №1 */
line-height : .3em; /* устанавливаем междустрочный интервал для всего документа */
}
h2 {
counter-reset : schetchik2; /* инициализируем счетчик №2 */
}
h2:before { /* Псевдоэлемент :before добавляет содержимое, указанное в свойстве content перед каждым элементом <h2> */
counter-increment : schetchik1; /* определяем инкремент для глав с шагом 1 (значение по умолчанию) */
content : "Глава № " counter(schetchik1) ". "; /* указываем, содержимое, которое будет добавлено перед каждым элементом <h2>. Значение counter определяет счетчик   */
}
h3 {
margin-left : 20px; /* устанавливаем величину отступа от левого края элемента */
}
h3:before {/* Псевдоэлемент :before добавляет содержимое, указанное в свойстве content перед каждым элементом <h3> */
counter-increment : schetchik2; /* определяем инкремент для статей с шагом 1 (значение по умолчанию) */
content : counter(schetchik1) "." counter(schetchik2) " "; /* указываем, содержимое, которое будет добавлено перед каждым элементом <h3>. Значение counter определяет счетчик   */
}
</style>
</head>
<body>
<h2>Название главы</h2>
<h3>Статья</h3>
<h3>Статья</h3>
<h3>Статья</h3>
<h2>Название главы</h2>
<h3>Статья</h3>
<h3>Статья</h3>
<h3>Статья</h3>
<h2>Название главы</h2>
<h3>Статья</h3>
<h3>Статья</h3>
<h3>Статья</h3>
</body>
</html>

Пример использования счетчиков в CSS (свойства counter-reset и counter-increment).

Выведем содержание, как значение атрибута элемента, использую псевдоэлемент :after и свойство content:

<!DOCTYPE html>
<html>
<head>
<title>Пример использования счетчиков в CSS.</title>
<style> 
a:after {/* Псевдоэлемент :after добавляет содержимое, указанное в свойстве content после каждого элемента <а> */
content : ""attr(title)""; /* между всеми тегами <a></a> автоматически будет проставляться значение атрибута title */
}
</style>
</head>
<body>
<a href = "http://basicweb.ru" title = "Basicweb.ru"></a>
</body>
</html>

Пример добавления и изменения кавычек в тексте, используя CSS свойства content, quotes, а также псевдоэлементов :before и :after:

<!DOCTYPE html>
<html>
<head>
<title>Пример добавления кавычек к тексту в CSS</title>
<style> 
* {
quotes : "«" "»" "‹" "›"; /* используя универсальный селектор устанавливаем тип кавычек для первого и второго уровня вложенности (для всех элементов) */
}
p:before {content : open-quote;}  /* используя псевдоэлемент :before добавляем перед элементом <p> открывающиеся кавычки */
p:after {content : close-quote;}  /* используя псевдоэлемент :after добавляем после элемента <p> закрывающиеся кавычки */
</style>
</head>
<body>
<q>Обычная цитата<q>
<q>Это <q>ЦИТАТА</q> внутри цитаты</q>
<p>Параграф, к которому, используя псевдоклассы добавлены кавычки.</p>
</body>
</html>

CSS свойства