Sprite Style UL Style

Question

I wonder if it is possible to use a sprite image to replace the default bullet of the ul list. Is it possible?

Answer 1

Lists have a property list-style-image, but are often too inflexible.

You can usually make it work with something like this ...

ul {
   list-style: none;
}

ul li {
   padding: 3px 0 3px 35px;
   background: url(images/layout/bullet.png) no-repeat left center;
}

A sprite is usually not a good idea for this - unless you place them all vertically and don't allow enough vertical margins to prevent the list item from getting too big and having other sprites.

Answer 2

I'm sure it is possible

first you remove the bullet style for the li tag

list-style:none;

Then give background-imagefor the li tag