Custom list style for ordered lists

Question

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

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

as

(1) Item 1

(2) Item 2

(3) Item 3

Very close to a duplicate of http://stackoverflow.com/questions/1632005/ordered-list-html-lower-alpha-with-right-parentheses — j08691, Nov 07 '16 at 14:34

score 7 · Accepted Answer · answered Nov 07 '16 at 14:33

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

ol {
  counter-reset: custom;
  list-style-type: none;
}

ol li:before {
  content: '('counter(custom)') ';
  counter-increment: custom;
}

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

1 Answers1