开发者

Remove decimal from ordered <ol> list via CSS?

开发者 https://www.devze.com 2023-01-05 02:57 出处:网络
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 co开发者_Go百科de that involves a

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 co开发者_Go百科de 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.


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


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.

0

精彩评论

暂无评论...
验证码 换一张
取 消