Achieving sub numbering on ol items html

Several options, in fact, varying in robustness and support:

1. Do this in the code that generates the lists. Provided it is generated HTML, after all. Wikipedia does that, for example for their section numbers.
2. You could write some JavaScript to do it after page loading. Won’t work with JavaScript turned off, naturally.

3. Or you can turn to CSS counters. This is probably the best option, if you don’t need to support legacy versions of IE, where it is supported since version 8.

   Counters are “self-nesting”, in the sense that resetting a counter in a descendant element or pseudo-element automatically creates a new instance of the counter. This is important for situations like lists in HTML, where elements can be nested inside themselves to arbitrary depth. It would be impossible to define uniquely named counters for each level.

   Example(s):

   Thus, the following suffices to number nested list items. The result is very similar to that of setting ‘display:list-item’ and ‘list-style: inside’ on the LI element:

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