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

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;
}
​