JSFiddle - React, Tailwind, and code Playground

by swfour

HTML

<ol>
    <li>Number One</li>
    <li>Number Two</li>
    <li>Number Three</li>
</ol>
<ol>
    <li>Number Ten</li>
    <li>Number Eleven</li>
    <li>Number Twelve</li>
</ol>

CSS

ol {
    list-style-type: none;
    /* this does not work like I expected */
    counter-reset: lis;

}
ol:not(:first-of-type){
     counter-increment: ol
}
li {
    counter-increment: lis
}
li:before {
    content: counter(lis)". ";
    color: red;
}
ol:not(:first-of-type) li:before {
    content: counter(ol) counter(lis)". ";
    color: red;
}