Для начала добавим вот такой HTML-код вложенного нумерованного списка:
<ol>
<li>Элемент нумерованного списка первого уровня 1, с длинным текстом, специально что бы он не поместился на одной строке, что бы показать как он будет выглядеть.</li>
<li>
Элемент нумерованного списка первого уровня 2
<ol>
<li>Элемент нумерованного списка второго уровня 2.1</li>
<li>
Элемент нумерованного списка второго уровня 2.2, с длинным текстом, специально что бы он не поместился на одной строке, что бы показать как он будет выглядеть.
<ol>
<li>Элемент нумерованного списка третьего уровня 2.2.1, с длинным текстом, специально что бы он не поместился на одной строке, что бы показать как он будет выглядеть.</li>
<li>Элемент нумерованного списка третьего уровня 2.2.2</li>
</ol>
</li>
<li>Элемент нумерованного списка второго уровня 2.3</li>
</ol>
</li>
<li>
Элемент нумерованного списка первого уровня 3
<ol>
<li>
Элемент нумерованного списка второго уровня 3.1
<ol>
<li>Элемент нумерованного списка третьего уровня 3.1.1</li>
</ol>
</li>
</ol>
</li>
<li>Элемент нумерованного списка первого уровня 4</li>
</ol>
Реализуем нумерацию элементов списка с помощью псевдо элемента ::before, для этого добавим вот такой CSS-код:
<style>
/*Вложенность первого уровня*/
ol {
counter-reset: list1; /*создаем счетчик list1 внутри тега OL (который будем использовать для нумерации LI первого уровня вложенности), а так же он будет сбрасываться для каждого следующего OL*/
}
ol > li {
display: block;
position: relative; /*Делаем релативным, что бы можно было установить номер пункта в нужное место*/
margin: 0 0 5px 1.7em; /*Отодвигаем строку на 1.7em вправо что бы в это место разместить номер пункта и соответственно при переносе строки весь текст так же будет в одну горизонтальную линию*/
}
/*Реализуем нумерацию на псевдо элементе ::before*/
ol > li::before {
position: absolute;
left: -1.7em; /*размещаем вывод номера пункта на месте с которого сдвинули саму строку*/
counter-increment: list1; /*Указываем что каждый элемент LI будет увеличивать на единицу счетчик list1*/
content: counter(list1) "."; /*Выводим номер пункта с точкой в конце, где counter(list1) это порядковый номер LI внутри списка, при желании можно вывести например цифру со скобкой counter(list1) ")"*/
font-weight: 600;
}
/*Вложенность второго уровня*/
ol > li > ol {
counter-reset: list2; /*Создаем счётчик list2 внутри вложенного тега OL (который будем использовать для нумерации LI второго уровня вложенности)*/
margin: 5px 0 0 0;
}
ol > li > ol > li {
margin-left: 2.5em;
}
ol > li > ol > li::before {
left: -2.5em;
counter-increment: list2; /*Указываем что каждый элемент LI второго уровня будет увеличивать на единицу счетчик list2*/
content: counter(list1) "." counter(list2) "."; /*Выводим номер пункта, сперва указываем номер основного пункта, точка, номер подпункта, точка*/
}
/*Вложенность третьего уровня*/
ol > li > ol > li > ol {
counter-reset: list3; /*Аналогично счетчик для третьего уровня нумерованного списка*/
}
ol > li > ol > li > ol > li {
margin-left: 3.3em;
}
ol > li > ol > li > ol > li::before {
left: -3.3em;
counter-increment: list3; /*Аналогично увеличиваем счетчик list3*/
content: counter(list1) "." counter(list2) "." counter(list3) "."; /*Аналогично собираем составной номер пункта с учетом номеров его родителей*/
}
</style>
В итоге получаем вот такой результат:
Если у вас будут присутствовать четвертый, пятый и т.д. уровни вложенности нумерованных списков, то для каждого последующего уровня нужно будет добавить CSS-код по аналогии как это было сделано для второго и третьего уровней.