Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Remove decimal from ordered <ol> list via CSS?

Tags:

css

html-lists

I assume the answer is "no," but I thought I'd throw the question out there to all you CSS ninjas, since it has cropped up before, and when you're digging through code that involves a whole team, the happiest answer isn't always "well, just rework the code."

Given an ordered list:

<ol>
    <li>...</li>
    <li>...</li>
    <li>...</li>
</ol>

Is it possible to remove the decimal points but retain numbering via JUST CSS, no javascript hackery, etc.? My gut and experience says "absolutely not," but I know there are some pretty creative types out there, and I wonder if there's something I haven't considered yet.

Update

Possible text example, as requested:

Convert ordered list that looks like this:

1. [...content...]
2. [...content...]
3. [...content...]

To something like this:

1 [...content...]
2 [...content...]
3 [...content...]

All with CSS wizardy, no javascript. Again, I realize this might be impossible, but ya just never know, do ya.

like image 442
americanyak Avatar asked Dec 17 '22 23:12

americanyak


2 Answers

This works in Firefox 3.6.6 and Chrome 6, but not in IE7 or IE8 (no suprise there).

OL { counter-reset: item }
LI { display: block }
LI:before { content: counter(item) " "; counter-increment: item }

See http://www.w3.org/TR/CSS2/generate.html#scope

like image 109
sgriffinusa Avatar answered Dec 28 '22 09:12

sgriffinusa


For a low-tech but highly cross-browser compatible solution, you can use a background image with vertically stacked numbers applied to the ol; just specify a line-height to be sure it all aligns.

like image 36
reisio Avatar answered Dec 28 '22 09:12

reisio