Below is the CSS code used to create counters:
#lctndrp li:before{
content: counters(item, ".") " ";
counter-increment: item;
}
The HTML code is as follows:
<ol>
<li>
::before
one
<ol>
<li>
::before
one.one
</li>
<li>
::before
one.two
</li>
</ol>
</li>
<li>
::before
two
<ol>
<li>
::before
two.one
</li>
<li>
::before
two.two
</li>
</ol>
</li>
</ol>
The desired HTML output should be:
<ol>
<li>
<div>1</div>
<ol>
<li>
<div>1.1</div>
</li>
<li>
<div>1.2</div>
</li>
</ol>
</li>
<li>
<div>2</div>
<ol>
<li>
<div>2.1</div>
</li>
<li>
<div>2.2</div>
</li>
</ol>
</li>
</ol>
I have successfully created a counter using CSS for the list items with format 1, 1.1, 1.2 within the li:before tag. Now I am looking to achieve the same result within the div tag. Can you help me find a solution to this issue?