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.

About the Author...

Jennifer Zelazny

My name is Jennifer Zelazny and this site is a collection of my random thoughts and opinions. I am Penn Stater, WordPress developer, and a modern day explorer. I love exploring data, trends, and things that make the world a better place and sharing them here.