How can i style a ol decimal?

Question

I need to be able to add a purple circle background and change the color of just the number in an ol li decimal html element.

Is that possible without any extra markup? I've tried backgrounds, list-style-image etc etc, but none seem to so that.

Any ideas?

Can you make a jsfiddle showing exactly what you want to achieve? — kamil-mrzyglod, Jan 21 '13 at 11:01
Are you trying to achieve something **[like this](http://stackoverflow.com/questions/5732836/html-css-numbered-list-with-numbers-inside-of-circles)** ? — MarcoK, Jan 21 '13 at 11:06
@Kamo Correct me if I'm wrong, but if they could **make a JSFiddle showing exactly what they want to achieve** then they wouldn't be asking the question. — George, Jan 21 '13 at 11:08
@F4r-20 - true, but clarifying problem by creating fiddle, which simulates problem or shows it at least wouldn't hurt. — kamil-mrzyglod, Jan 21 '13 at 11:13

score 2 · Accepted Answer · answered Jan 21 '13 at 11:06

2

I use another span element to format the background of each li numer. You can view the demo here on JSBin

answered Jan 21 '13 at 11:06

Hieu Le

Based on your example, I've shortened the code by using the `:before` pseudo element - you can **[view it here](http://jsbin.com/abamat/5/edit)**. Sadly, this doesn't answer the question from John, since he doesn't want any extra markup. – MarcoK Jan 21 '13 at 11:10
I think i'm going to go with adding the span as it would give the most cross compatibility. I know i said i didn't want more markup, but looking at this, i don't think i have a choice. Thanks for the answers guys!! – John Jan 21 '13 at 11:13

1 Answers1