JSFiddle - React, Tailwind, and code Playground

by Gabriele Petrioli

HTML

<ol class="roman">
    <li>Chapter</li>
    <li>Chapter</li>
    <li>Chapter
        <ol>
            <li>Sub-chapter</li>
            <li>Sub-chapter
                <ol>
                    <li>Sub-chapter-section</li>
                    <li>Sub-chapter-section</li>
                    <li>Sub-chapter-section</li>
                    <li>Sub-chapter-section</li>
                </ol>
            </li>
        </ol>
    </li>
    <li>Chapter</li>
    <li>Chapter
        <ol>
        <li>Sub-chapter</li>
        <li>Sub-chapter</li>
        </ol>
    </li>
</ol>

CSS

ol{
    list-style: none;
}
ol.roman{
    counter-reset: roman;
}
ol.roman > li:before{
    counter-increment: roman;
    content: counter(roman, upper-latin)".";
    padding-right:5px;
}
ol.roman li ol{
    counter-reset: inner;
}
ol.roman ol li:before{
    counter-increment: inner;
    content: counter(roman, upper-latin)"."counters(inner,'.');
    padding-right:5px;
}