CSS background-size for list items using sprite sheet

Question

Please look at my snippet here: http://jsfiddle.net/33fmA/

<div style="width:140px;border:1px solid blue;">
<ul>
    <li>Item 1</li>    
    <li>Item 2 with more text</li>
    <li>Item 3</li>
</ul>
</div>

i'm trying to css style a unordered list with a bullet image, the problem is that I can't set a fixed background-image height of 16px in order to get proper hovering. that's why for list items with more than one line the bullet image looks ugly.

is there a solution without having to add extra elements and floating/styling?

thanks

Answer 1

Use :before pseudo here.. Now the issue with your solution is when you use sprites, you need an element to have fixed dimensions, using background-size will resize entire image, and NOT a particular part of the image.

So here, I create a virtual element using CSS :before pseudo, am assigning some fixed dimensions to that, also make sure that if you aren't using position: absolute; than make sure you declare display: inline-block; as :before pseudo generated content is inline by default.

li:before {
    content: "";
    position: absolute;
    left: 0;
    height: 16px;
    width: 16px;
    top: 1px;
    background-image: /* Your base_64 junk */
}

Demo

Demo 2 (Hover the last li for an active bullet state)

Answer 2

That's why we some times use a separate icon tag like

<span class="icon-cog"></span>

or

<i class="icon-bullet"></i>

So that you can give the icon the size you need.

Then you can have lots of configurations using background size and position.