JSFiddle - React, Tailwind, and code Playground

by satantx

HTML

<ol class="global">
   <li>Пункт
    <ol>
     <li>Подпункт</li>
     <li>Подпункт</li>
     <li>
Подпункт
       <ol>
         <li>Подпункт</li>
          <li>Подпункт</li>
           <li>Подпункт</li>
       </ol>
     </li>
    </ol>
   </li>
   <li>Пункт
    <ol>
     <li>Подпункт</li>
     <li>Подпункт</li>
    </ol>
   </li>
  </ol>

CSS

li { list-style-type: none; }

ol.global { counter-reset: list1; } 

ol.global > li:before {
  counter-increment: list1; 
   content: counter(list1) ". "; 
 }
   ol.global ol { counter-reset: list2; } 
   ol.global > li > ol > li:before {
    counter-increment: list2; 
    content: counter(list1) "." counter(list2) ". "; 
   }

   ol.global ol ol { counter-reset: list3; }
   ol.global ol ol li:before {
    counter-increment: list3; 
    content: counter(list1)"." counter(list2)"." counter(list3)". ";
   }