Search code examples
htmlcssseparatorhtml-lists

HTML + CSS: Ordered List without the Period?


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

Solution

  • 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 */
    }