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


This question already has an answer here:


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;


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

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.

Need Your Help

Unable to resolve "unable to get local issuer certificate" using git on Windows with self-signed certificate

windows git curl ssl-certificate msysgit

I am using git on Windows. I installed the msysgit package. My test repository has a self signed certificate at the server. I can access and use the repository using http without problems. Movi...

Is @font-face usable now?

css fonts css3 font-face

I have to use a fancy font in a project but I'd really like to avoid sifr and other ugly alternatives so I'm looking at @font-face.