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

This covers all your available built in options. Only other thing you could do is to create an image of the right parenthesis and attempt to position it ever so carefully as the <li> background.

Answer 2

Adding this to the CSS gave some interesting results. It was close, but no cigar.

          li:before {display:inline-block; width: 1em; position:relative; left:-0.5em; content: ')'}

Answer 3

Here's a really 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.

CSS:

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

HTML:

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

I haven't tested in anything other than Opera yet, but you can bet your life it won't work in IE6 and probably not IE7.

Answer 4

Great tip, DisgruntledGoat! Tested successfully with

• Mozilla Firefox 3.6.10
• Opera 10.61
• Safari 5.0
• Google Chrome 6.0.472.62

Sadly enough even version 9 (beta) of IE doesn't support it.

Answer 5

This works for me in IE7, FF3.6, Opera 9.64 and Chrome 6.0.4

                <ol start="a" type="a" style="font-weight: normal;">
                <li><span style="inline-block;margin-left: -9px !important; margin-left: -15px;">) &nbsp;</span> content for line number one;</li>
                <li><span style="inline-block;margin-left: -9px !important; margin-left: -15px;">) &nbsp;</span>  content for line number two;</li>
                <li><span style="inline-block;margin-left: -9px !important; margin-left: -15px;">) &nbsp;</span>  content for line number three;</li> 
                <li><span style="inline-block;margin-left: -9px !important; margin-left: -15px;">) &nbsp;</span>  content for line number four;</li>
                <li><span style="inline-block;margin-left: -9px !important; margin-left: -15px;">) &nbsp;</span>  content for line number five;</li>
                <li><span style="inline-block;margin-left: -9px !important; margin-left: -15px;">) &nbsp;</span>  content for line number six;</li>
            </ol>

this is inline because it is coded for an email, but the main point is that the span acts as a content block and pulls the paren into negative left territory so it lines up with the list numbers. the two margins are to compensate for IE7 and FF differences

hope this helps.