Создайте счетчик ("my-sec-counter") и увеличивайте его на единицу для каждого вхождения селектора "h2":
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) ". ";
}
Попробуйте сами »
Определение counter-reset
CSS свойство counter-reset создает или сбрасывает один или несколько счетчиков CSS.
CSS свойство counter-reset обычно используется вместе с свойством counter-increment и content.
| Значение по умолчанию: | none |
|---|---|
| Унаследовано: | no |
| Анимируемый: | no. Читайте о animatable |
| Версия: | CSS2 |
| JavaScript синтаксис: | object.style.counterReset="section" Попробуй |
Поддержка counter-reset
Цифры в таблице указывают первую версию браузера, которая полностью поддерживает это свойство.
| Свойство | |||||
|---|---|---|---|---|---|
| counter-reset | 4.0 | 8.0 | 2.0 | 3.1 | 9.6 |
Синтаксис counter-reset
counter-reset: none|name number|initial|inherit;
Значения counter-reset
| Значение | Описание |
|---|---|
| none | Значение по умолчанию. Никакие счетчики не будут сброшены |
| id number | Идентификатор id определяет, какой счетчик следует сбросить. Число id задает значение, на которое сбрасывается счетчик при каждом появлении селектора. Значение по умолчанию number равно 0 |
| initial | Устанавливает для этого свойства значение по умолчанию. Читайте о initial |
| inherit | Наследует это свойство от своего родительского элемента. Читайте о inherit |
Примеры counter-reset
Создайте счетчик ("my-sec-counter") и уменьшайте его на единицу для каждого вхождения селектора "h2":
body {
/* Установить "my-sec-counter" в 0 */
counter-reset: my-sec-counter;
}
h2::before {
/* Уменьшить "my-sec-counter" на 1 */
counter-increment:
my-sec-counter -1;
content: "Раздел "
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: "Раздел " counter(section) ": ";
}
h2::before {
/* Увеличить "subsection" на 1 */
counter-increment: subsection;
content: counter(section) "." counter(subsection) " ";
}
Попробуйте сами »
Создайте счетчик и увеличьте его на единицу (используя римские цифры) для каждого вхождения селектора <h2>:
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) ". ";
}
Попробуйте сами »
Страницы по теме counter-reset
CSS Справочник: ::before псевдоэлемент
CSS Справочник: ::after псевдоэлемент
CSS Справочник: content свойство
CSS Справочник: counter-increment свойство
CSS functions: counter() function
HTML DOM справочник: counterReset свойство