counter-increment

Пример

Создайте счетчик ("my-sec-counter") и увеличивайте его на единицу для каждого вхождения селектора "h2":

body {
/* Установить "my-sec-counter" to 0 */
counter-reset: my-sec-counter;
}

h2::before {
/* Увеличить "my-sec-counter" на 1 */
counter-increment: my-sec-counter;
content: "Section " counter(my-sec-counter) ". ";
}

Попробуйте сами »

Определение counter-increment

CSS свойство counter-increment увеличивает или уменьшает значение одного или нескольких счетчиков CSS.

CSS свойство counter-increment обычно используется вместе с свойством counter-reset и content.

Значение по умолчанию:	none
Унаследовано:	no
Анимируемый:	no. Читайте о animatable
Версия:	CSS2
JavaScript синтаксис:	object.style.counterIncrement = "subsection"; Попробуй

Поддержка counter-increment

Цифры в таблице указывают первую версию браузера, которая полностью поддерживает это свойство.

Свойство
counter-increment	4.0	8.0	2.0	3.1	9.6

Синтаксис counter-increment

counter-increment: none|id|initial|inherit;

Значения counter-increment

Значение	Описание
none	Значение по умолчанию. Никакие счетчики увеличиваться не будут
id number	Идентификатор id определяет, какой счетчик увеличивать. Число id задает, на сколько счетчик будет увеличиваться при каждом появлении селектора. Приращение по умолчанию равно 1. Допускаются отрицательные значения. Если id ссылается на счетчик, который не был инициализирован путем сброса счетчика, начальное значение по умолчанию равно 0
initial	Устанавливает для этого свойства значение по умолчанию. Читайте о initial
inherit	Наследует это свойство от своего родительского элемента. Читайте о inherit

Примеры counter-increment

Пример

Create a counter ("my-sec-counter") and decrease it by one for each occurrence of the <h2> selector:

body {
/* Установить "my-sec-counter" в 0 */
counter-reset: my-sec-counter;
}

h2::before {
/* Уменьшить "my-sec-counter" на 1 */
counter-increment: my-sec-counter -1;
content: "Section " counter(my-sec-counter) ". ";
}

Попробуйте сами »

Пример

Нумерация разделов и подразделов с помощью "Раздела 1:", "1.1", "1.2", и т.д.:

body {
/* Установить "section" в 0 */
counter-reset: section;
}

h1 {
/* Установить "subsection" в 0 */
counter-reset: subsection;
}

h1::before {
/* Увеличить "section" на 1 */
counter-increment: section;
content: "Section " counter(section) ": ";
}

h2::before {
/* Увеличить "subsection" на 1 */
counter-increment: subsection;
content: counter(section) "." counter(subsection) " ";
}

Попробуйте сами »

Пример

Create a counter and increase it by one (using Roman numerals) for each occurrence of the <h2> selector:

body {
/* Установить "my-sec-counter" в 0 */
counter-reset: my-sec-counter;
}

h2::before {
/* Увеличить "my-sec-counter" на 1 */
counter-increment: my-sec-counter;
content: counter(my-sec-counter, upper-roman) ". ";
}

Попробуйте сами »