CSS Tuesday: Images as List Bullets

There are plenty of ways to spruce up the boring bullets used in HTML lists.

The best way and most browser compatible way I have found to do this is using the following code:

ul li {background: url('images/dot.gif') no-repeat 0 3px; list-style:none;margin:0 0 2px 0;padding:0 0 0 10px;}

You can see that here:

  • Example of fancy bullet
  • Another bullet point

Vs. The plain list:

  • Example of fancy bullet
  • Another bullet point

Something like this may seem simple, but it is often overlooked and can really dress up a site.