Многоуровневый нумерованный список

by Ankhena

HTML

<ol class="numbered">
  <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
    <ol>
      <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
        <ol>
          <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
          <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
          <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
        </ol>
      </li>
      <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
      <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
        <ol>
          <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
          <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
            <ol>
              <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
              <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
              <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                  <ol>
                    <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
                    <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
                    <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
                  </ol>
              </li>
            </ol>
          </li>
          <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
        </ol>
      </li>
    </ol>
  </li>
  <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
  <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
</ol>

CSS

.numbered , .numbered ol {
  list-style: none; 
  counter-reset: li; 
}
.numbered li:before {
  counter-increment: li; 
  content: counters(li,".") ". "; 
}