<ol>
  <li>Main Item 1
    <ol>
      <li>Sub-item 1.1
        <ol>
          <li>Sub-sub-item 1.1.1</li>
          <li>Sub-sub-item 1.1.2</li>
        </ol>
      </li>
      <li>Sub-item 1.2</li>
    </ol>
  </li>
  <li>Main Item 2
    <ol>
      <li>Sub-item 2.1</li>
      <li>Sub-item 2.2
        <ol>
          <li>Sub-sub-item 2.2.1</li>
          <li>Sub-sub-item 2.2.2</li>
        </ol>
      </li>
    </ol>
  </li>
</ol>
ol {
  padding-inline-start: 0;
  margin-block-end: 1em;
  counter-reset: section;
}

ol li {
  display: block;
}

ol > li {
  counter-increment: section;
}

ol > li::before {
  content: counter(section) ". ";
  font-weight: bold;
}

ol > li > ol {
  counter-reset: subsection;
}

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

ol > li > ol > li::before {
  content: counter(section) "." counter(subsection) " ";
  margin-inline-end: 0.2em;
}

ol > li > ol > li > ol {
  counter-reset: subsubsection;
}

ol > li > ol > li > ol > li {
  counter-increment: subsubsection;
}

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

ol ol {
  margin-block-end: 0;
  padding-inline-start: 1.5em;
}

/* Just for styling */
body {
  display: grid;
  justify-content: center;
  align-items: center;
  min-height: 100dvh;
  margin: 0;
  padding: 2rem;
  background-color: aqua;
  background-image: linear-gradient(to right, #efefef, #b4e6ff);
  font-family: sans-serif;
  line-height: 1.5;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.