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

Issue

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?

Solution

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.

Answered By - DisgruntledGoat