I am experimenting with the CSS counter reset feature to create a numbering system on my website. The main list should be in regular decimal format (e.g. 1, 2, 3, 4) while the sub-list should be in upper Roman numerals (e.g. I, II, III, IV, etc).
Below is the HTML code I am using:
<div class="sample">
<ol>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<li>Nulla vitae ex eget turpis elementum mollis vel nec odio.<
<ol>
<li>Vivamus nec justo non nibh ultricies porta eu ut enim.</li>
<li>Pellentesque ac scelerisque lacus, at condimentum nisl.</li>
<li>Donec suscipit augue id magna blandit, et interdum purus semper.</li>
</ol>
</li>
</ol>
</div>
Check out the CSS style below:
.sample ul,
.sample ol {
margin-left: 0;
padding-right: 0;
list-style-type: none;
counter-reset: step-counter;
}
.sample ul > li,
.sample ol > li {
counter-increment: step-counter;
position: relative;
padding-left: 27px;
margin-bottom: 30px;
}
.sample ul > li:before,
.sample ol > li:before {
content: counter(step-counter, disc );
position: absolute;
left: 0;
}
.sample ul ul > li:before,
.sample ol ol > li:before {
content: counters(step-counter, disc );
}
.sample ul > li:before {
font-size: 24px;
line-height: 24px;
}
.sample ol > li:before {
content: counter(step-counter, decimal );
}
.sample ol ol > li:before {
content: counters(step-counter, upper-roman ) ".";
}
I'm encountering an issue where the child level still displays decimal numbers instead of upper Roman numerals. What am I missing?
You can view the fiddle here - https://jsfiddle.net/ajaxthemestudios/v6w1gkpt/4/