Ordered list (HTML) lower-alpha with right parentheses?

Question

The default lower-alpha list type for ordered list uses a dot '.'. Is there a way to use a right parenthesis instead like a)... b) ..etc?

Answer 1

Here's a neat solution. (Honestly I surprised myself with this.) CSS has something called counters, where you can set, for example, automatic chapter numbers on each heading. A bit of modification gives you the below; You'll need to sort out padding etc yourself.

ol {    counter-reset: list;  }  ol > li {    list-style: none;  }  ol > li:before {    content: counter(list, lower-alpha) ") ";    counter-increment: list;  }

<span>custom list style type (v1):</span>  <ol>    <li>Number 1</li>    <li>Number 2</li>    <li>Number 3</li>    <li>Number 4</li>    <li>Number 5</li>    <li>Number 6</li>  </ol>

Works in all modern browsers and IE9+ (and possibly IE8 but may be buggy).

Update: I added child selector to prevent nested lists picking up the parent style. trejder also beings up a good point in the comments that the list item alignment is also messed up. An article on 456bereastreet has a good solution which involves absolutely positioning the counter.

ol {      counter-reset: list;  }  ol > li {      list-style: none;      position: relative;  }  ol > li:before {      counter-increment: list;      content: counter(list, lower-alpha) ") ";      position: absolute;      left: -1.4em;  }

<span>custom list style type (v2):</span>  <ol>    <li>Number 1</li>    <li>Number 2</li>    <li>Number 3</li>    <li>Number 4</li>    <li>Number 5</li>    <li>Number 6</li>  </ol>

Here is a jsFiddle showing the result, including nested lists.

Answer 2

building off of DisgruntledGoat's answer, I expanded it to support sub lists & styles as I needed. Sharing it here in case it helps someone.

https://jsfiddle.net/0a8992b9/ outputs:

(i)first roman     (a)first alpha     (b)second alpha     (c)third alpha     (d)fourth alpha (ii)second roman (iii)third roman     (a)first alpha     (b)second alpha