Today I was wondering whether I could use a custom character as my list bullet. The requirement was that it was strictly CSS and not a background image.

Turns out, it’s actually pretty straightforward:

1
2
3
4
5
6
7
8
9
10

ul {
    list-style: none;
}
 
ul li:before {
    color: #f00;
    content: '» ';
    font-size: 1.2em;
    font-weight: bold;
}

ul {
	list-style: none;
}

ul li:before {
	color: #f00;
	content: '» ';
	font-size: 1.2em;
	font-weight: bold;
}

What’s interesting to note is that you can define a different style for this character, too, so it doesn’t have to match the rest of the list text.

The only caveat is that defining a margin between the character and your text is a bit trickier, since you can’t accomplish that with margin or padding, unless you wrap your list text in another HTML tag.

Unfortunately you can’t use HTML entities in your content either, but you can use Unicode. The Unicode value for space is \0000a0, so if you add that within your content value, you can achieve additional space.

1
2
3
4
5
6
7
8
9
10

ul {
    list-style: none;
}
 
ul li:before {
    color: #f00;
    content: '» \0000a0';
    font-size: 1.2em;
    font-weight: bold;
}

ul {
	list-style: none;
}

ul li:before {
	color: #f00;
	content: '» \0000a0';
	font-size: 1.2em;
	font-weight: bold;
}

That’s it. Let me know if you come up with an alternative or an improvement in the comments below.