CSS Ordered Lists, is there a way to style the background of the number?

Question

I'm styling an ordered list 1, 2, 3, 4 etc...

Is there a way to place an image behind each number, so the 1, 2, 3, 4 appear on top of it?

eg:

image[1.] List Item 1

image[2.] List Item 2

image[3.] List Item 3

image[4.] List Item 4

Answer 1

Yes. You could use ol .li:before to move the image behind the numbers. You could also use list-style-position: inside; to move the numbering to the inside of he list item itself and then have a background on the li element.

Answer 2

Well, another way to do it would would be to add the image to each list item then shift its position. See fiddle . I used divs instead of images because it was easier. However, this method should be tested across different browsers to make sure it doesn't look weird.

<ol>
    <li> 
        <div class="list-image"></div>
        foo
    </li>    
    <li>
        <div class="list-image"></div>
        bar 
    </li>
</ol>​

css:

ol{
   list-style-type:decimal;
   padding:50px 50px;
}

.list-image{
   width:20px;
   height:20px;
   position:relative;
   background-color:lightgray;
   top:20px;
   left:-25px;    
   z-index:-1;
}
​

Answer 3

Look into the :marker pseudo-element:

http://dev.w3.org/csswg/css3-lists/#marker-pseudo-element