Styling indent with HTML or CSS like in Ms Word -

i need a., b. style inner indent instead of 2.2.1., 2.2.2.. found original css code html ordered list indent keep original numbering

my code:

<style>     ol { counter-reset: item }     li { display: block }     li:before { content: counters(item, ".") ". "; counter-increment: item } </style>  <ol>     <li>one</li>     <li>         2         <ol>             <li>two one</li>             <li>                 2 two                 <ol type="a">                     <li>two 2 a</li>                     <li>two 2 b</li>                 </ol>             </li>             <li>two three</li>         </ol>     </li>     <li>three</li> </ol> 

what i'm getting:

1. 1 2. 2    2.1. 2 1    2.2. 2 two       2.2.1. 2 two       2.2.2. 2 two b    2.3. 2 3 3. 3 

what need:

1. 1 2. 2    2.1. 2 1    2.2. 2 two       a. 2 two       b. 2 two b    2.3. 2 3 3. 3 

since don't need prepend inner lists section numbering, can add additional rule using counter letters:

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

details: http://jsfiddle.net/kmaj6/3/. should work existing html.