How do you hide the dot after the bullet number in an ordered list?

Question

Initially, I thought I could use :first-letter in CSS, legacy browser support aside, but I don't think the bullet numbers technically exist in the DOM. Assume I'm not going to use bullet list images or background images.

So something like:

Apples
Bananas
Oranges

would become

  1 Apples
  2 Bananas
  3 Oranges

score 49 · Accepted Answer · edited May 23 '17 at 12:10

49

From this answer, it appears that the answer is:

ol { 
    counter-reset: item;
    list-style-type: none;
}
ol li { display: block; }
ol li:before { 
    content: counter(item) "  "; 
    counter-increment: item;
}

SEE ALSO: http://jsbin.com/ukojo4/

edited May 23 '17 at 12:10

Community

1
1

answered Feb 14 '11 at 20:36

Sean Vieira

155,703
32
311
293

duplicate: http://stackoverflow.com/questions/10877/how-can-you-customize-the-numbers-in-an-ordered-list/10887#10887 vote to close – hunter Feb 14 '11 at 20:38
3
also, set `list-style-type:none;` on the `
– drudge Feb 14 '11 at 20:39
5

Also use `ol li` instead of just `li` to protect unsorted lists from this alteration. which would change bullets into 1. – Gjordis Sep 23 '13 at 10:05
There is a slight mistake, at counter-increment: item there is a missing ; – MichalCh Mar 22 '16 at 11:34

score 4 · Answer 2 · answered Aug 03 '12 at 16:55

One problem of the solution provided by Sean is that you loose the nice alignment of the numbers.

Another way to remove the dots is to simply hide them by placing something else above them:

ol li:before {
    content: ".";
    color: #fff;        // color it in white (or whatever background you have)
    float: left;
    font-size: 20px;    // make it bigger.
    font-weight: bold;  // and bolder
    position: absolute; 
    left: 18px;         // horizontal offset
    line-height: 13px;  // vertical offset
}

You will probably need to play around with left and line-height in order to place the white dots correctly, depending on your actual paddings and margins.

See it in action here http://jsfiddle.net/HGfty/

score 1 · Answer 3 · edited May 23 '17 at 12:34

1

Here is your answer from another post. I was able to modify the fiddle there to get your answer

Custom ordered list format

EDIT: looks like sean already got to it. +1 for his answer.

edited May 23 '17 at 12:34

Community

1
1

answered Feb 14 '11 at 20:39

Jeff

13,943
11
55
103

How do you hide the dot after the bullet number in an ordered list?

3 Answers3