How to remove dot "." after number in ordered list items in OL LI?

Question

Possible Duplicate:
HTML + CSS: Ordered List without the Period?

Want to remove dot "." from OL (order list)

<ol>
<li>One</li>
<li>Two</li>
</ol>

Result

 1. One
 2. Two

Required Result

 1 One  
 2 Two

See the answer [over here](http://stackoverflow.com/a/5945305/74757). Note, the technique doesn't work in older IE browsers. — Cᴏʀʏ, Aug 14 '12 at 05:13

Moin Zaman · Accepted Answer · 2012-08-14T05:18:44.373

46

This will work in IE8+ and other browsers

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

or even:

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

If you want older browsers to be supported as well then you could do this (courtesy neemzy):

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 ol ; the dots are now invisible ! */
}

edited Aug 14 '12 at 05:18

answered Aug 14 '12 at 05:11

Moin Zaman

25,281
6
70
74

tell more about browser support and accessibility – Vladimir Starkov Aug 14 '12 at 05:13
@Vladimir Starkov: IE8+, doesn't harm accessibility in any way as it's still an `ol`. – BoltClock Aug 14 '12 at 05:13
1

@VladimirStarkov It's work till IE8 & above – sandeep Aug 14 '12 at 05:14
@BoltClock I know it. but it must be included in answer for future users – Vladimir Starkov Aug 14 '12 at 05:14
3

May have problems if the text goes over multiple lines. I would suggest the [following amendments](http://jsfiddle.net/26rW4/1), as per [this stackoverflow answer](http://stackoverflow.com/a/486662/1171529). – Jeemusu Aug 14 '12 at 05:16
Yes this work, also noticed that we do not require to add list-style-type:none; in OL. – The AV Aug 14 '12 at 05:35
@BoltClock Its work fine in IE8 too – The AV Aug 14 '12 at 05:37
Downside is that this becomes selectable text so not good for number
```
 with code examples.
```
– Lukus Aug 01 '17 at 19:29

How to remove dot "." after number in ordered list items in OL LI?

1 Answers1

Linked