html - Add a 'point zero' to first level of nested css counter -

here's ordered list have far:

1 item 2 item     2.1 item     2.2 item     2.3 item         2.3.1 item         2.3.2 item         2.3.3 item 3 item 4 item 

this produced following:

<ol>     <li>item</li>     <li>item     <ol>         <li>item</li>         <li>item</li>         <li>item         <ol>             <li>item</li>             <li>item</li>             <li>item</li>         </ol></li>     </ol></li>     <li>item</li>     <li>item</li> </ol> 

and css:

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

what want make top level list items have 'point zero' following counter, in

1.0 item 2.0 item     2.1 item 

and forth. can done in css? may need creative solution.

set initial styling include 0.

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

overwrite selecting children elements.

li > ol > li:before {     content: counters(section, ".")" "; } 

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

<ol>      <li>item</li>      <li>item          <ol>              <li>item</li>              <li>item</li>              <li>item                  <ol>                      <li>item</li>                      <li>item</li>                      <li>item</li>                  </ol>              </li>          </ol>      </li>      <li>item</li>      <li>item</li>  </ol>