Функция CSS `counter()`

counter() — это CSS-функция, которая возвращает строку, представляющую текущее значение именованного счётчика, если он существует.

Функция counter() обычно используется в псевдоэлементе с помощью свойства content, но теоретически её можно использовать везде, где поддерживается значение <string>.

Попробуйте

.double-list {
  counter-reset: count -1;
}

.double-list li {
  counter-increment: count 2;
}

.double-list li::marker {
  content: counter(count, decimal) ") ";
}

<p>Best Dynamic Duos in Sports:</p>
<ol class="double-list">
  <li>Simone Biles + Jonathan Owens</li>
  <li>Serena Williams + Venus Williams</li>
  <li>Aaron Judge + Giancarlo Stanton</li>
  <li>LeBron James + Dwyane Wade</li>
  <li>Xavi Hernandez + Andres Iniesta</li>
</ol>

Синтаксис

/* Basic usage */
counter(counter-name);

/* changing the counter display */
counter(counter-name, upper-roman)

Счётчики сами по себе не оказывают видимого эффекта. Функции counter() и counters() делают счётчики полезными, возвращая заданные разработчиком строки (или изображения).

Значения

Функция counter() принимает до двух параметров. Первый параметр — это <counter-name>. Второй параметр — необязательный <counter-style>.

<counter-name>

<custom-ident>, задающий имя счётчика. Это то же имя с учётом регистра, которое используется в значениях свойств counter-reset и counter-increment. Имя счётчика не может начинаться с двух дефисов и не может быть none, unset, initial или inherit.

<counter-style>

Имя list-style-type, counter-style-name или функция symbols(). Именем стиля счётчика может быть numeric, alphabetic или symbolic предопределённый стиль счётчика, сложный предопределённый стиль счётчика для восточноазиатской или эфиопской письменности либо другой предопределённый стиль счётчика. Если параметр не указан, по умолчанию используется стиль счётчика decimal.

Формальный синтаксис

<counter()> = 
  counter( <counter-name>, <counter-style>? )

<counter-name> = 
  <custom-ident>

<counter-style> = 
  <counter-style-name> |
  symbols()

<counter-style-name> = 
  <custom-ident>

Примеры

lower-roman и lower-alpha

В этом примере мы отображаем счётчик, используя стили списков lower-roman и lower-alpha.

HTML

<ol>
  <li></li>
  <li></li>
  <li></li>
</ol>

CSS

ol {
  counter-reset: count;
}
li {
  counter-increment: count;
}
li::after {
  content:
    "[" counter(count, lower-roman) "] == ["
    counter(count, lower-alpha) "]";
}

Результат

Отображение счётчика с использованием трёх стилей

В этом примере мы трижды используем функцию counter().

HTML

<ol>
  <li></li>
  <li></li>
  <li></li>
</ol>

CSS

Мы используем функцию counter() с тремя разными стилями счётчиков, включая десятичный стиль по умолчанию. Мы добавили отступы для списка, чтобы освободить место для длинной строки ::marker.

ol {
  counter-reset: listCounter;
  padding-left: 5em;
}
li {
  counter-increment: listCounter;
}
li::marker {
  content:
    "Item #" counter(listCounter) " is: ";
}
li::after {
  content:
    "[" counter(listCounter, decimal-leading-zero) "] == ["
    counter(listCounter, upper-roman) "]";
}

Результат

Спецификации

Совместимость с браузерами

См. также

• Использование счётчиков CSS
• counter-reset
• counter-set
• counter-increment
• @counter-style
• Функция CSS counters()
• Модуль списков и счётчиков CSS
• Модуль стилей счётчиков CSS
• Модуль генерируемого содержимого CSS