Многие типы контента лучше всего представлять в виде HTML- списка . Для упорядоченного списка, например, этапов приготовления рецепта или сносок к статье, маркер часто также содержит информацию. CSS предоставляет несколько способов управления счётчиками в списке.
Стили списка
Существует широкий спектр предопределенных типов стилей списков, которые поддерживают числа, алфавитные и римские цифры, а также многие международные системы исчисления.
В дополнение к стилям, поддерживаемым браузерами, W3C опубликовала готовые стили счетчиков с поддержкой 181 дополнительного стиля в 45 системах письма.
Если эти параметры вам не подходят, вы также можете определить собственный @counter-style . Это позволит вам указать собственные символы, префикс и суффикс, а также многое другое.
По умолчанию маркер элемента находится outside списка, перед ним и выровнен по правому краю. Вы также можете разместить маркер элемента внутри списка, используя свойство list-style-position: inside .
Счетчики
В то время как стили списков управляют отображением маркеров элементов списка, счётчики позволяют управлять отображаемыми значениями. Для элементов списка <li> браузер создаёт счётчик с именем list-item , который увеличивается на 1 для каждого обнаруженного элемента списка.
Счетчики CSS ведут текущий подсчет количества отображений элемента, имеющего соответствующее значение counter-increment .
Чтобы создать новый счётчик, используйте counter-reset указав имя счётчика и, при необходимости, начальное значение. Часто этот метод устанавливается для родительского элемента, содержащего все подсчитываемые элементы.
Затем добавьте свойство counter-increment для каждого элемента, который вы хотите посчитать.
Наконец, отобразите значение счетчика с помощью функции counter() .
В этом примере мы хотим отобразить текущее количество сносок в виде текста ссылки для каждой сноски. Поскольку нам нужен единый счётчик для всего документа, мы устанавливаем counter-reset: note для основного текста и increment для каждой ссылки на сноску.
Вы также можете использовать несколько счётчиков для подсчёта разных элементов. В примере со сносками, что, если вы хотите отобразить индекс раздела и абзаца, в котором находится сноска?
Счётчик разделов можно создать в теле документа с помощью функции counter-reset , а затем увеличивать его для каждого элемента <h2> . Мы хотим, чтобы счётчик абзацев сбрасывался для каждого раздела, поэтому используем counter-reset для элементов <h2> и увеличиваем его для элементов <p> .
Наконец, мы объединяем значения счетчиков в свойстве content .
a:after {
content: "(S" counter(section) "P" counter(paragraph) "N" counter(note) ")";
font-size: small;
vertical-align: super;
}
Вложенные счетчики
Что происходит, когда список вкладывается в другой список? Счётчик list-item инициализируется для каждого элемента <ul> или <ol> , и функция counter() возвращает только значение самого внутреннего счётчика. Чтобы отобразить счётчик для каждого из вложенных счётчиков, используйте функцию counters() , которая принимает имя счётчика и разделитель.
li::marker {
content: counters(list-item, ".")
}
Реверсивные счетчики
По умолчанию счетчики (включая неявный счетчик list-item для элементов <ol> ) начинаются с 0 и увеличиваются на единицу для каждого элемента, то есть первый элемент будет считаться как 1. Что делать, если вы хотите посчитать в обратном порядке до 1?
Для этого добавьте атрибут reversed к элементу <ol> . Если вы используете стандартный стиль списка, маркеры будут работать как надо. Однако, если вы используете пользовательский счётчик, вам потребуется установить для counter-increment отрицательное значение и вручную рассчитать начальное значение счётчика.