I am experiencing an issue with numbering a list
.content ol {
padding-left: 0px;
counter-reset: item;
}
.content ol > li {
display: block;
}
.content ol > li::before {
content: counters(item, ". ") " " ;
counter-increment: item;
}
.content ol ol > li {
display: block;
}
.content ol ol > li::before {
content: counters(item, ". ") ". " ;
}
This is the HTML code I am using:
<div id="test">
<ol>
<li> item1</li>
<li> item2
<ol>
<li>item 2.1</li>
<li>item 2.2
<ol>
<li>item a</li>
<li>item b</li>
<li>item c </li>
</ol>
</li>
<li>item 2.3</li>
</ol>
<li>item 3</li>
<ol>
</div>
On the webpage, it displays as:
1. item1
2. item2
1. item 2.1 --- want to display as 2.1
2. item 2.2 --- want to display as 2.2
a. item a
b. item b
c. item c
3. item 2.3 --- want to display as 2.3
3. item 3