Стили для нумерации CSS
При необходимости нумерации чего-либо на сайте чаще всего используют упорядоченный список (<ol>). Резонно ожидать, что может возникнуть желание поработать над дизайном этих чисел. В СSS, однако, реализовать это желание довольно проблематично, но, к счастью, не невозможно. В своем руководстве Roger Johansson показывает, как это может быть реализовано с помощью псевдоэлемента :before, который для свойства content может иметь значение counter.
:before применяется для отображения желаемого контента до элемента, к которому он добавляется. Работает совместно со свойством content. 
Стоит прояснить, однако, что пронумерованные счетчики (counters) можно применять не только к упорядоченным спискам. К примеру, предположим, что вы захотели пронумеровать список определений (<dl>), который состоит из вопросов и ответов для вашего FAQ.
Разметка будет выглядеть приблизительно так:
HTML
<dl class="faq">
<dt>How much wood would a wood chuck chuck if a wood chuck could chuck wood?</dt>
<dd>1,000,000</dd>
<dt>What is the air-speed velocity of an unladen swallow?</dt>
<dd>What do you mean? An African or European swallow?</dd>
<dt>Why did the chicken cross the road?</dt>
<dd>To get to the other side</dd>
</dl>
Каждый новый <dt> элемент это новый вопрос, поэтому к ним и применим нумерацию. Выглядеть это будет предельно просто:
content позволяет вставлять генерируемое содержание в текст веб-страницы, которое первоначально в тексте отсутствует.Значение
counter Выводит значение счетчика, заданного свойством counter-reset.Свойство
counter-reset устанавливает идентификатор для счетчика и задает начальное значение.Свойство
counter-increment задает шаг увеличения значения счетчика. CSS
.faq {
counter-reset: my-badass-counter;
}
.faq dt:before {
content: counter(my-badass-counter);
counter-increment: my-badass-counter;
}
Псевдоэлементу :before можно назначить любые стили. Например:
Освоив это свойство, можно нумеровать все, что только захочется. На днях, к примеру, я выложил один из моих любимых рецептов и пронумеровал каждый шаг/фото римскими цифрами. Это послужило для меня напоминанием: числа необязательно должны быть десятичными.
Числовое многообразие представлено в виде значений свойства list-style-type.
А именно:
Все, что требуется, так это указать желаемый вариант в значении счетчика.
CSS
content: counter(my-counter, lower-roman);Будущее CSS3
Вышеописанный материал актуален для сегодняшнего дня, однако и он меркнет в сравнении с теми возможностями, которые скрыты CSS3 списках. Как только в браузерах будет реализована их поддержка, можно будет, к примеру, работать с маркерами списков напрямую.
CSS
li::marker {
width: 30px;
text-align: right;
margin-right: 10px;
display: inline-block;
}
ol {
list-style: symbols("*""2020""2021""A7");
}
ul {
list-style-type: "тут должна быть звездочка)";
}
Источник
Комментарии к статье