CSS :: Свойство counter-increment

css-свойство counter-increment (от англ. counter increment – увеличение показания счетчика) увеличивает одно или несколько значений указанного в качестве значения счетчика, задаваемого при помощи свойства counter-reset.

Характеристики

Значение по умолчанию: none.
Применяется: ко всем элементам.
Наследуется: нет.
Анимируется: нет.
JavaScript: object.style.counterIncrement="value".

Синтаксис

counter-increment: [<переменная> | <число>?]+ | none

Значения

id_счетчика число – задается имя счетчика, значение которого будет увеличиваться, а также через пробел указывается необязательное значение приращения счетчика (целые числа). Если значение приращения счетчика не будет указано, браузер применит значение по умолчанию, равное 1.
none – значения счетчиков для текущего селектора не будут изменяться, т.е. увеличиваться или уменьшаться в зависимости от значения приращения.

Ссылки

Официальный сайт W3C: https://drafts.csswg.org/css2/generate.html#propdef-counter-increment

Статья на Mozilla Firefox: https://developer.mozilla.org/ru/docs/Web/CSS/counter-increment

Примеры

HTML Результат

htmlCodes

<!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