Making Custom Numbered List in CSS : Part 1

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:

1. counter-reset : To initialize our counter in the parent element.
2. counter-increment : To specify our increment value for our counter.
3. content : To output the numbers by replacing elements in the ::before or ::after Selector.

Below is a sample using counter function with block level elements.

See the Pen Custom List in CSS by Sheun (@sheunl) on CodePen.

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.

See the Pen Custom List in CSS 2 by Sheun (@sheunl) on CodePen.

Hope this provides a quick intro into custom numbered lists in CSS. Watch out for the second part.