La forma mas rapida y comoda de hacerlo es con contadores de css
- li element
- sub li element
- sub li element
- sub li element
- sub li element
- sub li element
- sub li element
- sub li element
- li element
- li element
- sub li element
- sub li element
- sub li element
ol { counter-reset: item } li{ display: block } li:before { content: counters(item, ".") " "; counter-increment: item }
<ol> <li>li element</li> <li>sub li element <ol> <li>sub li element</li> <li>sub li element <ol> <li>sub li element</li> </ol> </li> </ol> <ol> <li>sub li element</li> <li>sub li element</li> <li>sub li element</li> </ol> </li> <li>li element</li> <li>li element <ol> <li>sub li element</li> <li>sub li element</li> <li>sub li element</li> </ol> </li> </ol>