JSFiddle - React, Tailwind, and code Playground

by erKURITA

HTML

<ol>
    <li>Text goes here</li>
    <li>More text here
        <ol>
            <li>This is what I need</li>
        </ol>
    </li>
    <li>List continues like this</li>
    <li>And it goes on</li>
    <li>And on</li>
    <li>But here
        <ol>
            <li>There is another sub section</li>
            <li>And another</li>
            <li>And another</li>
        </ol>
    </li>
    <li>Is this possible?</li>
    <li>Please guide me.</li>
</ol>

CSS

ol {
    list-style-type: none;
    counter-reset: sub_index;
}

:not(li) > ol > li {
    counter-increment: index;
}

li > ol > li:before {
    counter-increment: sub_index;
    content: counter(index,decimal)'.'counter(sub_index,upper-alpha)' ';
}

:not(li) > ol > li:before {
    content: counter(index,decimal)' ';
}