Sometimes, we want to make an ordered list produce results that look like 1.1, 1.2, 1.3,… with CSS.
In this article, we’ll look at how to make an ordered list produce results that look like 1.1, 1.2, 1.3,… with CSS.
How to make an ordered list produce results that look like 1.1, 1.2, 1.3,… with CSS?
To make an ordered list produce results that look like 1.1, 1.2, 1.3,… with CSS, we set the content property.
For instance, we add a nested list with
<ol>
<li>
li element
<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>
Then we write
ol {
counter-reset: item;
}
li {
display: block;
}
li:before {
content: counters(item, ".") " ";
counter-increment: item;
}
to add content: counters(item, ".") " "; and counter-increment: item; to make the nested list item show numbers separated with a dot.
Conclusion
To make an ordered list produce results that look like 1.1, 1.2, 1.3,… with CSS, we set the content property.
