JSFiddle - React, Tailwind, and code Playground

by ajai jothi

HTML

<h1></h1>
<h1></h1>
<h1></h1>
<h1></h1>
<h1></h1>

<ul>
    <li>
        <ul>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </li>
    <li>
        <ul>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </li>
    <li>
        <ul>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </li>
    <li>
        <ul>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </li>
    <li>
        <ul>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </li>
</ul>

CSS

section{
     counter-reset: chapter;
}
h1{
    counter-increment: chapter;
}
h1:before{
    content:"(Chapter " counter(chapter, upper-roman) ")"
}

ul{
    counter-reset: list;
}
ul > li {
    counter-increment:list;
}
ul li:before{
    content: "(Item " counters(list, ".") ")";
}