Alpha-ordered lists with brackets (parentheses) instead of dots

Want to have ordered lists in HTML5 / CSS with right brackets / parentheses (a)) instead of dot (a.)? Yes, it is possible. I found a really hacky, neat solution to get it.

And… there are only few small obstacles, you have to learn to live on with.

The solution can be found at Stack Overflow (of course!) and basically narrows to use following CSS code:

[code language=”css”]
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;
}
[/code]

When using it keep, in mind that:

First problem. This isn’t 100% real numbering. You can see the difference on multi-line items. In normal lists (using standard bullets or numbers) each line has the same indent, so bullet or number looks like standing before block of text.

With above solution, each next line starts below numbering and isn’t slightly inset.

Second problem. This fails completely on multi-level lists. If you have construction like this:

[code language=”html”]
<ol class="params-list" type="a">
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>
<ul class="params-list">
<li>item 3.1</li>
<li>item 3.2</li>
<li>item 3.3</li>
<li>item 3.4</li>
<li>item 3.5</li>
</ul>
</li>
<li>item 4</li>
</ol>
[/code]

Then… sorry folks, that won’t work.