Comments on: Fancy Unordered Lists (bullet points) using CSS

By: Hypermiling

Hypermiling — Mon, 22 Aug 2011 21:39:11 +0000

Many thanks for that, CSS always melts my brains with lists.

By: Richard

Richard — Sun, 17 Jul 2011 10:09:38 +0000

Thanks for this – I really like what you’ve done her!

By: Jason

Jason — Tue, 12 Jul 2011 01:50:53 +0000

Great tutorials, thanks for the info…

By: Building and Contents Insurance Dot Net

Building and Contents Insurance Dot Net — Tue, 01 Mar 2011 10:14:53 +0000

Cheers for the post. We’ve enjoyed reading it.

By: Richard

Richard — Mon, 15 Nov 2010 17:00:40 +0000

Nice article. I tweaked it a little to make it extensible:

.image-list { list-style:none; margin: 20px 0; }
.image-list li { padding: 2px 0 12px 30px; background: url(‘img/icons/tick.png’) no-repeat top left; } /* default */
.image-list li.tick { background: url(‘img/icons/tick.png’) no-repeat top left;} /* explicit option */
.image-list li.plus { background: url(‘img/icons/plus.png’) no-repeat top left;} /* plus icon */

Now you can call it like:

This will show a tick icon
This will also show a tick icon
This will show a plus icon

I personally like the top left alignment for bullets as it looks good for wraping text, just preference I think.

By: ken the tech

ken the tech — Fri, 11 Dec 2009 13:52:52 +0000

hehe, I have been apply yet some fancy bullets to my website. Cool! Thanks mate!

By: продажа сотовых телефонов Екатеринбург

продажа сотовых телефонов Екатеринбург — Sat, 24 Oct 2009 11:42:57 +0000

Thank you for this valuable post. It changed my idea.

By: GotFilms.biz

GotFilms.biz — Fri, 07 Aug 2009 05:26:02 +0000

Awesome just what I was looking for, thanks!

By: Ren

Ren — Fri, 17 Jul 2009 20:11:50 +0000

Fellow co-worker refered me to this site. I didn’t know you could do that for Unordered lists. Thanks Vince.

By: Vince Cutting

Vince Cutting — Wed, 20 May 2009 23:22:56 +0000

yes, you’d need to create a small image of a hyphen. Make it as simple or as fancy as you desire.