Remove decimal from ordered <ol> list via CSS?

I suppose the answer is no, but I thought that throw the question there so that you CSS ninja all come up earlier, and when you delve into code that includes the whole team, the happiest answer is not always "good, just rework the code."

For the ordered list:

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

Is it possible to remove the decimal point, but keep the numbering through JUST CSS, not javascript carts, harnessed oxen, etc.? My gut and experience say "absolutely not", but I know that there are some pretty creative looks there, and I wonder if there is something I have not considered yet.

Update

Possible text example, as requested:

Convert an ordered list that looks like this:

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

Something like that:

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

All with CSS wizardy, no javascript. Again, I understand that this may not be possible, but I just don’t know, do it yourself.

+4
source share
2 answers

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

 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

+11
source

For a low-tech, but very cross-browser solution, you can use a background image with vertically stacked numbers applied to ol ; just specify line-height to make sure everything is aligned.

+1
source

Source: https://habr.com/ru/post/1314371/


All Articles