Pure CSS coloured bullets

A lot of times we have to have our text one colour and the bullets in a bullet list another colour. There are plenty of places you will find the usual solution of wrapping the text in a span and giving the li one colour and li > span another. Sometimes however, we don't have access to the html or we simply don't want to add any extra markup and today, faced with this problem, I came up with a quick solution which seems to work well.

The main problem that manually adding a bullet causes is the text indenting doesn't work like it normally would on a list as only the first line will be indented...but this seemed to do the trick...

Example:

  • A list item
  • another list item
  • a multi-line
    list item
   ul{
	    color: green;
	    list-style: none;
   }
   li{
		display: table-row;
   }
   li:before{
	    content: "•";
	    color: red;
	    vertical-align: top;
	    width: 15px;
	    display: table-cell;
   }

Now as i said, this solution works well...in modern good browsers. I haven't had a chance to test it in all browsers so feel free to leave comments on any browser compatibility or incompatibility that you come across.

 

Leave a Comment

All comments are appreciated. Comments are moderated before appearing on the site, so please don't bother trying leaving spam! Only genuine comments will be shown.

Your Name

Email Address (optional)

What year is it? (Spam Prevention)

Comment

moo.com business card printing123-reg Domain names

What's All This About?

Deanblog is a collection of articles written by Dean Morgan from Deanzod Limited. The aim of the site is to provide helpful information for everyone from web designers & developers right through to website owners. I will try and keep a good balance of information such as php/mySQL tutorials, html/css tutorials along with marketing ideas and advice for website owners.

Recent Articles