css - 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>