title: How to order list which produce result that starts from 1.1, 1.2, 1.3 (instead of just 1, 2, 3) with css and html
body: <p>How to order list which produce result that looks like 1.1, 1.2, 1.3 (instead of just 1, 2, 3, …) with css and html ?</p>
  <p>So far getting output as,</p>
  <p><a href="https://i.stack.imgur.com/YQxAx.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/YQxAx.png" alt="enter image description here" /></a></p>
  <p>for the below code,</p>
  <p>HTML:</p>
  <pre><code>&lt;ol&gt;
  &lt;li&gt;Lorem ipsum.&lt;/li&gt;
  &lt;li&gt;Excepteur sint occaecat cupidatat non proident:
      &lt;ol&gt;
          &lt;li&gt;sunt in culpa qui officia,&lt;/li&gt;
          &lt;li&gt;deserunt mollit anim id est laborum.&lt;/li&gt;
      &lt;/ol&gt;
  &lt;/li&gt;
  &lt;li&gt;Ut enim ad minim veniam.
      &lt;ol&gt;
          &lt;li&gt;Quis nostrud exercitation.&lt;/li&gt;
          &lt;li&gt;Ullamco laboris nisi ut.
              &lt;ol&gt;
                  &lt;li&gt;
                      Duis aute irure dolor
                  &lt;/li&gt;
              &lt;/ol&gt;
          &lt;/li&gt;
      &lt;/ol&gt;
  &lt;/li&gt;
  </code></pre>
  
  <p>CSS:</p>
  <pre><code>ol {
    list-style-type: none;
    counter-reset: item;
    margin: 0;
    padding: 0;
  }
  
  li {
    display: table;
    counter-increment: item;
    margin-bottom: 0.6em;
  }
  
  li:before {
    content: counters(item, &quot;.&quot;) &quot;. &quot;;
    display: table-cell;
    padding-right: 0.6em;    
  }
  
  li li {
    margin: 0;
  }
  
  li li:before {
    content: counters(item, &quot;.&quot;) &quot; &quot;;
  }
  </code></pre>
  <p>But i need to get the result as,</p>
  <p><a href="https://i.stack.imgur.com/0gKp4.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/0gKp4.png" alt="enter image description here" /></a></p>
  <p><a href="https://jsfiddle.net/gha0cod3/" rel="nofollow noreferrer">JSfiddle</a></p>