JSFiddle - React, Tailwind, and code Playground

by hinablue

HTML

<div class="toc">
    <ul>
        <li>這是第x章，啦啦啦啦
            <ul>
                <li>這是第x節，啦啦啦啦啦啦</li>
                <li>這是第x節，啦啦啦啦啦啦</li>
                <li>這是第x節，啦啦啦啦啦啦</li>
                <li>這是第x節，啦啦啦啦啦啦</li>
                <li>這是第x節，啦啦啦啦啦啦</li>
                <li>這是第x節，啦啦啦啦啦啦</li>
                <li>這是第x節，啦啦啦啦啦啦</li>
                <li>這是第x節，啦啦啦啦啦啦</li>
            </ul>
        </li>
        <li>這是第x章，啦啦啦啦
            <ul>
                <li>這是第x節，啦啦啦啦啦啦</li>
            </ul>
        </li>
        <li>這是第x章，啦啦啦啦
            <ul>
                <li>這是第x節，啦啦啦啦啦啦</li>
            </ul>
        </li>
        <li>這是第x章，啦啦啦啦
            <ul>
                <li>這是第x節，啦啦啦啦啦啦</li>
            </ul>
        </li>
        <li>這是第x章，啦啦啦啦
            <ul>
                <li>這是第x節，啦啦啦啦啦啦</li>
            </ul>
        </li>
    </ul>
</div>

CSS

.toc {
    counter-reset: chapter;
}
.toc > ul > li {
    counter-increment: chapter;
    counter-reset: section;
    margin-left: 1em;
}
.toc > ul > li::before {
    content: counter(chapter);
    margin-right: 0.5em;
}
.toc > ul > li > ul > li {
    counter-increment: section;
    margin-left: 1em;
}
.toc > ul > li > ul > li::before {
    content: counter(chapter) "." counter(section);
    margin-right: 0.5em;
}