Атрибут CSS counter-set

Определение и использование

counter-set Свойство используется для создания и установки CSS счетчика в определенное значение.

counter-set Свойства обычно используются вместе с свойствами counter-increment и content.

Пример

Пример 1

Создать счетчик ("my-counter"), установить его значение в 5 и увеличивать его на 1 каждый раз, когда появляется селектор <h2>:

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

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

Пример 2

Создать счетчик ("my-counter"), установить его значение в 5 и уменьшать его на 1 каждый раз, когда появляется селектор <h2>:

body {
  /* Установить "my-counter" в значение 5 */
  counter-set: my-counter 5;
}
h2::before {
  /* Уменьшить "my-counter" на 1 */
  counter-increment: my-counter -1;
  content: "Section " counter(my-counter) ". ";
}

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

Пример 3

Использовать форматы "Section 10:"、"10.1"、"10.2" и т.д. для нумерации глав и подглав:

body {
  /* Установить "section" в значение 9 */
  counter-set: section 9;
}
h1 {
  /* Установить "subsection" в 0 */
  counter-set: subsection 0;
}
h1::before {
  /* Увеличить "section" на 1 */
  counter-increment: section;
  content: "Section " counter(section) ": ";
}
h2::before {
  /* Увеличить "subsection" на 1 */
  counter-increment: subsection;
  content: counter(section) "." counter(subsection) " ";
}

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

Пример 4

Создайте счетчик, установите его значение в 9 и увеличьте его на 1 при каждом出现 <h2> селектора (используя римские цифры):

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

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

Синтаксис CSS

counter-set: none|counter-name number|initial|inherit;

Значение атрибута

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

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

Соответствующие страницы

См. также:Псевдоэлемент ::before

См. также:Псевдоэлемент ::after

См. также:Атрибут CSS content

См. также:Атрибут CSS counter-increment

См. также:Функция counter() в CSS