How to make nest numbering list in format ១.១ in HTML and CSS?

Question

I tried to archive list style type of html and CSS just like below:

១.​ option1
​    ១.១.​ option1.1
    ១.២. option1.2
          ១.២.១. option 1.2.1
          ១.២.២.​ option 1.2.2
    ១.៣. option1.3
២. option2
៣. option3
៤. option4

Found in similar solution here, I came up with my html script like this:

 ol {
   list-style: khmer;
  }
  ol { counter-reset: item }
  li{ display: block }
  li:before { content: counters(item, ".") " "; counter-increment: item }

 <ol>
  <li>option1
   <ol>
    <li>option1.1</li>
    <li>option1.2
     <ol>
      <li>option 1.2.1</li>
      <li>option 1.2.2</li>
     </ol>
    </li>
    <li>option1.3</li>
   </ol>
  </li>
  <li>option2</li>
  <li>option3</li>
  <li>option4</li>
 </ol>

From above, the numbering is fine, however my list style at list-style: khmer won't applied as I want them to be ១.១,​ ១.២ like so.

Should any idea to my html code to make it working as I wish above? Thanks.

Answer 1

You might want to use the list style type as an image, so as to pick exactly what you want

list-style-image: url("img/imageName");