How to remove period (.) from OL numbering?

Question

http://jsbin.com/urice

I want to remove . after number.

1. should be 1 only

With All browser compatibility inducing IE6 and validity.

I need solution without javascript.

Edit :

If it's not possible with css only then a simple javascript and jQuery solution would be appreciated, thanks.

Using pure css I don't think it's possible, but I'd be interested to find out. — David Thomas, May 03 '10 at 13:16
Why do you need pure-javascript **and** jQuery? And I edited the question to make it a little less demanding, and more courteous. — David Thomas, May 03 '10 at 15:50
Aside from IE6 compatibility (gosh, weren't those the days? ), this question has a wider range of answers here: https://stackoverflow.com/q/5945161/2652785 — Kal, Sep 08 '22 at 05:56

Kyle · Answer 1 · 2010-05-05T09:31:38.110

3

There is this, not sure how many browsers support it though.

ol {
list-style-type:none;
} 

ol li:before {
content:counter(number) " ";
counter-increment:number;
counter-reset: number;
}

Working example here. I have it working in Chrome.

edited May 05 '10 at 09:31

answered May 03 '10 at 13:17

Kyle

65,599
28
144
152

1

Doesn't match the criteria for IE6 compatibility though. Certianly not without js. – David Thomas May 03 '10 at 13:20
@ricebowl - you can give javascript solution if it's not possible using css only – Jitendra Vyas May 03 '10 at 13:21
Aye, I kinda figured IE wouldn't support it. But at least it's an option for the real browsers, then could just use some JS for IE. – Kyle May 03 '10 at 13:25
It's not working in Chrome for me - you're missing `counter-reset: number;` on the list. – DisgruntledGoat May 05 '10 at 09:24
Edited to add `counter-reset: number;`. – Kyle May 05 '10 at 09:32

score 1 · Answer 2 · answered May 05 '10 at 09:29

Honestly, the only way do what you want completely cross browser is to not use the list numbering at all. Just put list-style:none on the list and type the numbers manually:

<ol>
  <li>1 The first item</li>
  <li>2 The second item</li>
</ol>

If you're generating code server-side, then it's a lot easier since you can use an incrementing variable in your loop.

score 0 · Answer 3 · answered May 03 '10 at 13:35

0

Using jQuery to find the < li > and inserting an incrementing number into their .innerHTML is probably the best way to do this using javascript.

answered May 03 '10 at 13:35

cazlab

788
5
17

How to remove period (.) from OL numbering?

3 Answers3