Reza Reza - 12 days ago 8
HTML Question

Changing the list style type to a specific format

When I use this HTML code

<ol>
<li>Example</li>
<li>Example
<ol>
<li>Example</li>
<li>Example
<ol>
<li>Example</li>
</ol>
</li>
<li>Example</li>
</ol>
</li>
<li>Example</li>
</ol>


I will get this output:

enter image description here

How can I make my result look like this:

enter image description here

?

Answer

To get that resault you will have to use counters

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

Read this page for more infos