Круглые скобки для нумерованного списка HTML с помощью CSS
По правилам русского языка после точки (.) первая буква следующего предложения пишется заглавной, а после круглой скобки — строчной. Несмотря на это довольно часто приходится наблюдать следующую картину при использовании нумерованных списков HTML:
1. один.
2. два.
3. три.
1) Один;
2) Два;
3) Три.
Конечно же так оформлять списки неправильно, но, в то же время, это дело автора ...
Рассмотрим создание следующего списка средствами CSS:
1) один;
2) два;
3) три.
Обычная нумерация
ol.with-parentheses { counter-reset: myCounter; list-style: none; }-
counter-reset: myCounter;- сбрасываем счётчик.
list-style: none;- скрываем стандартные номера / маркеры.
ol.with-parentheses > li::before { content: counter( myCounter ) ') '; counter-increment: myCounter; }-
content: counter( myCounter ) ') ';- добавляем перед каждым пунктом списка номер и круглую скобку с пробелом: ') '.
counter-increment: myCounter;- увеличиваем счётчик на единицу.
myCounter — это переменная счётчика, которой можно определить любое другое имя, состоящее из английских букв (a-z), арабских цифр (0-9) и знаков подчёркивания (_), причём в качестве первого символа переменной рекомендуется использовать букву.
Сквозная нумерация
Для сброса нумерации нужно просто использовать класс start ещё раз.
Неактуальный способ
Ниже расположен код, в котором не используются counter-подобные свойства.
Единственное отличие данного списка от вышеприведённых — это наличие точки (.) после номера пункта.
Добавив отступ влево (margin-left: -10px;) больше 10 пикселей (например, 14), можно добиться слияния точки с круглой скобкой:
