CSS ol sub numbering

August 20, 2021

Делаем списки для документов на CSS

Юридические документы, как правило, имеют  пронумерованные пункты. При этом пункты могут содержать вложенные пункты. Можно, конечно, такие вещи сделать в ручную, но через CSS это может быть удобнее.

Собственно сам код очень прост:

ol { counter-reset: item }
ol > li { display: block }
ol > li:before {
    content: counters(item, ".") ". ";
    counter-increment: item
}

В итоге получаем такой вот документ:



Profile picture

Written by Alexander Mayorov
Full Stack CTO