Creating a custom numbered list in CSS is quite simple. This can be done using a list or any block level element. We will be using the following CSS properties:
counter-reset: To initialize our counter in the parent element.
counter-increment: To specify our increment value for our counter.
content: To output the numbers by replacing elements in the
Below is a sample using
counter function with block level elements.
Custom numbering is useful if you want to create complex numbering systems that are not readily available using
<ol> element. or if you want to automatically add special characters to your numbering like brackets. Example below adds nested numbering to a list, using the
counters function in this.
Hope this provides a quick intro into custom numbered lists in CSS. Watch out for the second part.