Custom List Style For Ordered Lists

Is it possible to define a style for an ordered list that renders something like

1. Item 1
2. Item 2
3. Item 3

   Solution 1:

   You can use css counter and :before pseudo-element to create this type of list.

   ol {
     counter-reset: custom;
     list-style-type: none;
   }
   
   olli:before {
     content: '('counter(custom)') ';
     counter-increment: custom;
   }

   <ol><li>Item 1</li><li>Item 2</li><li>Item 3</li></ol>

Share