I am interested in creating a unique list type using Khmer Unicode Numbers ១ ២ ៣.. in a precise order. To achieve this, I attempted to utilize CSS pseudo-classes
li:nth-child(1) li:nth-child(2) li:nth-child(3)..ul.mainList {
list-style-type: none;
}
ul.mainList > li {
text-indent: -5px;
}
ul.mainList > li:nth-child(1):before {
content: "១. ";
text-indent: -5px;
}
ul.mainList > li:nth-child(2):before {
content: "២. ";
text-indent: -5px;
}
ul.mainList > li:nth-child(3):before {
content: "៣. ";
text-indent: -5px;
}
ul.mainList > li:nth-child(4):before {
content: "៤. ";
text-indent: -5px;
}
ul.mainList > li:nth-child(5):before {
content: "៥. ";
text-indent: -5px;
}
ul.mainList > li:nth-child(6):before {
content: "៦. ";
text-indent: -5px;
}
ul.mainList > li:nth-child(7):before {
content: "៧. ";
text-indent: -5px;
}
ul.mainList > li:nth-child(8):before {
content: "៨. ";
text-indent: -5px;
}
The HTML markup for the list is as follows:
<p>List of items</p>
<ul class="mainList">
<li>Item ១</li>
<li>Item ២</li>
<li>Item ៣</li>
<li>Item ៤</li>
<li>Item ៥</li>
<li>Item ៶</li>
<li>Item ៷</li>
<li>Item ៸</li>
</ul>
While this method works well, it becomes cumbersome when dealing with more than ten or twenty list items, requiring multiple declarations of li:nth-child(n). Is there a more efficient approach? Thank you.