Sometimes, we want to fix HTML ordered list 1.1, 1.2 (nested counters and scope) not working with CSS.
In this article, we’ll look at how to fix HTML ordered list 1.1, 1.2 (nested counters and scope) not working with CSS.
How to fix HTML ordered list 1.1, 1.2 (nested counters and scope) not working with CSS?
To fix HTML ordered list 1.1, 1.2 (nested counters and scope) not working with CSS, we set the content property.
For instance, we write
<ol>
<li>one</li>
<li>
two
<ol>
<li>two.one</li>
<li>two.two</li>
<li>two.three</li>
</ol>
</li>
<li>
three
<ol>
<li>three.one</li>
<li>
three.two
<ol>
<li>three.two.one</li>
<li>three.two.two</li>
</ol>
</li>
</ol>
</li>
<li>four</li>
</ol>
to add the ordered list.
Then we write
ol {
counter-reset: item;
}
li {
display: block;
}
li:before {
content: counters(item, ".") " ";
counter-increment: item;
}
to add content: counters(item, ".") " "; to add the numbers for the nested list items.
Conclusion
To fix HTML ordered list 1.1, 1.2 (nested counters and scope) not working with CSS, we set the content property.
