Use :pseudo-elements as list-style-image alternatives  Styling
lists with CSS can be a bit of a pain from time to time. If I
require an kind of customized bullet, the first CSS property I
think of is list-style: none;. I’ve tried on more than one
occasion to use list-style-image but it’s given me nothing but
trouble when attempting to position it. A popular alternative is
to use the image as a background-image of the list item.  li {
background: url(images/bullet.png) no-repeat left top; list-
style: none; }  This gives us the ability to move the ‘list-
item‘ around as we please without problems. Great solution!
right?! No, there are three very annoying (however, small)
problems with this method:    • You can’t effectively include
the list item in a sprite, as you’d run into problems displaying
areas of the sprite you wish to remain hidden.   • An image
obviously can’t work with ordered lists as the numbered list-
style-type would require a different image for each list item.
This is possible but not very effect