HTML + CSS: Ordered List without the Period?

Question

I think the answer to this question is no... but does anyone know of a an HTML/CSS way to create an ordered list without a period after the numbers? Or, alternatively, to specify the separator character?

Ideally I don't want to do list-style-image with a different class for each number, but that's all I've been able to think of so far... That seems terribly unsemantic.

IE:

Default Style: 1. ______ 2. ______ 3. ______  Desired Style: 1  ______ 2  ______ 3  ______  Alternate Style: 1) ______ 2) ______ 3) ______ 

Answer 1

This is perfectly possible to do with just CSS (2.1):

ol.custom {   list-style-type: none;   margin-left: 0; }  ol.custom > li {   counter-increment: customlistcounter; }  ol.custom > li:before {   content: counter(customlistcounter) " ";   font-weight: bold;   float: left;   width: 3em; }  ol.custom:first-child {   counter-reset: customlistcounter; } 

Keep in mind that this solution relies on the :before pseudo-selector, so some older browsers -- IE6 and IE7 in particular -- won't render the generated numbers. For those browsers, you'll want to add an extra CSS rule that targets just them to use the normal list-style:

ol.custom {   *list-style-type: decimal; /* targets IE6 and IE7 only */ } 

Answer 2

Here is the solution

Number nested ordered lists in HTML

All you have to to is change a little bit here

ol li:before {                 content: counter(level1) " "; /*Instead of ". " */                 counter-increment: level1;             } 

^^