content | Справочник CSS
http://belarusweb.net
Основы создания сайтов

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 разрешается через пробел указывать сразу несколько значений свойства.

Ссылки

Примеры

HTML Результат BwCodes
<!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

HTML Результат BwCodes
<!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