JSFiddle - React, Tailwind, and code Playground

by David Thomas

HTML

<ol>
    <li>
        <ol>
            <li>The first nested item</li>
            <li>The second nested Item</li>
        </ol>
    </li>
    <li>
        <ol>
            <li>More nesting</li>
            <li>And even more...</li>
        </ol>
    </li>
</ol>

CSS

ol {
    list-style-position: outside;
    counter-reset: section;
    padding: 0.5em 1em;
    margin: 0 1em;
}
ol li {
    counter-increment: section;
}
ol li ol {
    counter-reset: subsection;
}

ol li ol li {
    counter-increment: subsection;
}

ol li:before {
    content: "Section: " counter(section);
    width: 3em;
    margin: 0 1em 0 0;
}

ol li ol li:before {
    content: counter(section) "." counter(subsection);
}