JSFiddle - React, Tailwind, and code Playground

by 규연 황

HTML

<h1>heading1</h1>
<main>
  <section>
    <h2>heading2</h2>
    <section>
      <h3>heading3</h3>
    </section>
    <section>
      <h3>heading3</h3>
    </section>
  </section>
  <section>
    <h2>heading2</h2>
    <section>
      <h3>heading3</h3>
    </section>
    <section>
      <h3>heading3</h3>
    </section>
    <section>
      <h3>heading3</h3>
    </section>
    <section>
      <h3>heading3</h3>
    </section>
  </section>
  <section>
    <h2>heading2</h2>
    <section>
      <h3>heading3</h3>
    </section>
  </section>
</main>

CSS

main{counter-reset:chapter 0;}
main section h2:before{counter-increment:chapter;content:counter(chapter) ". ";
}
main section h2{margin:30px 0 20px;counter-reset:section 0;}
main section h3:before{counter-increment:section;content:counter(chapter) "." counter(section) ". ";