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

Quintinquintina

Seems that you are screwed up with the periods :) I think the only way is constructing the list by yourself with <ul> – Saltation

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

Arsine

For what it's worth this didn't work until I moved the counter-increment to the li itself. Don't know why... Otherwise this is great, thanks! – Quintinquintina

This worked great for me, checked as far back as IE8, thanks so much! Never knew about this ability before. – Daladier

This only seems to work for list-style-position: inside. Any help on getting this to work for list-style-position: outside? – Anu

This approach is using pseudo-elements, so any CSS property to affect list-styles -- list-style-position, list-style-type, etc. -- won't work. You need to style the ::before pseudo-element. – Arsine

To make this work for multiline list items, add the following css. ol.custom>li { display: table-row } ol.custom>li:before { display: table-cell } – Lalita

ol.custom>li:before float:left must be removed also. – Lalita

just ignore people using ie6 and 7 - they are used to the internet being broken and will be confused if your site works. – Quintinquintina

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

^^

Almaalmaata

+1, This is the only way with pure CSS, but I don't believe it's well supported (yet) unfortunately. EDIT: I stand corrected, according to that link, it works in all current browsers. – Reliquiae

Any ideas how to add a leading zero? – Shrewd

@Shrewd This is a years-late response, but in case it somehow helps someone, see jsfiddle.net/a3L6e24s In the li::before's rule you can set content: "0" counter(mycounter) " "; and then set ol.leading0 li:nth-of-type(9)~li::before {content: counter(mycounter) " ";} . If one needed to support IE8 one could make the selector ol.leading0ie8 li + li + li + li + li + li + li + li + li ~ li:before – Hamartia

@JacobC. Wow! Thanks alot for answering this 5 years old question and supporting IE8 :-) – Shrewd

Answer 3

This can be achieved using the ::marker CSS pseudo element, which has pretty good browser support.

Note however, that Safari has an outstanding bug to support the content property, so this approach will not work there. In some cases this might be okay since the fallback behavior will just display the extra period.

ol { counter-reset: my-counter-name; }

li { counter-increment: my-counter-name; }

li::marker { content: counter(my-counter-name); }

Amati

A brilliant up-to-date answer. (Though I look forward to when ::marker can understand more CSS properties than the limited subset it comprehends at present.) – Ogrady

This should probably be added to a class. Adding a counter to the tag itself will increment all the numbers in <ol> elements on the page. – Minnie

Answer 4

You can remove the dots with CSS by specifying an empty suffix for the counter style:

@counter-style empty-style {
  system: extends decimal;
  suffix: ' ';
}

ol {
  list-style: empty-style;
}

You can further style the numbers with the ::marker pseudo-element.

Note that this technique is not supported at all in Safari (any version) or in legacy Edge. But, fortunately, it just degrades nicely in these browsers, rendering the default dot without issues.

So, it is a good progressive enhancement.

Minnie

Answer 5

I just found a workaround for cases where you want to simply remove the dot. Not the best solution ever, but it's done with only CSS and works in every browser. The downside is that you need the textnode in the LI to be wrapped into another tag (<span> or something). In my own case, the <ol> was used as a list of links, so I could use my <a> tags !

The CSS I used :

ol li a {
    float: right;
    margin: 8px 0px 0px -13px; /* collapses <a> and dots */
    padding-left: 10px; /* gives back some space between digit and text beginning */
    position: relative; z-index: 10; /* make the <a> appear ABOVE the dots */
    background-color: #333333; /* same background color as my ol ; the dots are now invisible ! */
}

Jessie

Interesting approach, thanks. No problem answering an old thread, sometimes you're adding very useful info. – Quintinquintina

This only works if you have a background with a single colour. – Conventicle

Answer 6

The above solutions all have drawbacks for some lists: multiline items, multidigit item numbers, custom background, etc.

It's cleaner to use the built-in list-item counter instead of a custom counter:

ol.dotless {
  list-style-type: none;
  margin-left: 0;
}
ol.dotless > li:before {
  content: counter(list-item) "\A0";
  float: left;
  text-align: right;
  width: 1.5em;
}

But this approach does not work with multiline items.

There is a new method that allows you to directly format a counter, but so far, it only works in Firefox:

ol.dotless {
  list-style: dotless-item
}
@counter-style dotless-item {
  system: numeric;
  symbols: "0" "1" "2" "3" "4" "5" "6" "7" "8" "9";
  suffix: " ";
}

The only method I've come across that works in all cases is a table that mimics an ol:

table.dotlessol {
  margin: 0.25em 1.25em;
  border-spacing: 0;
  counter-reset: dotless;
}
table.dotlessol tr {
  vertical-align: top;
  counter-increment: dotless;
}
table.dotlessol td {
  padding: 0;
}
table.dotlessol td:first-child {
  text-align: right;
  padding-right: 0.5em;
}
table.dotlessol td:first-child::before {
  content: counter(dotless);
}

Use two tds in each row, leave the first td empty, and put the item text in the second td.

Proportional

The @counter-style method was what I was looking for, thanks! Also, adding @counter-style dotless-item { system: extends decimal; suffix: ' '; } works just the same, removing the dots. Anyway, this technique is not supported in Safari or in legacy Edge, but it just degrades gracefully in these two, displaying the dots. – Minnie

Answer 7

You can add the numbers later using jQuery:

$("ul").each(function() {
   $(this).find("li").each(function(index) {
      $(this)
        .css("list-style-type", "none")
        .prepend("<div class='listnumber'>" + (index + 1) + "</div>");
   })
})

Try the sample here.

More info on jQuery here.

Alenealenson

Answer 8

This is the simplest solution without counter-increment and inline tags inside li:

ol {list-style-position: inside; overflow: hidden; direction: rtl;}
li {position: relative; left: -15px; text-align: left; letter-spacing: 5px;}

Presentable

Answer 9

you can first remove the marker and replace it with before element for better browser support and then use the builtin list-item counter

ol {
list-style:none
};
li::before {
content: counter(list-item)
}

expected result

  1 item 
  2 item 
  3 item 

Edit

the <li> should have display:list-item; wish is the default

Kyliekylila