Change your list bullet to a custom character in CSS

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.

3 thoughts on “Change your list bullet to a custom character in CSS

  1. judyofthewoods

    The code works well with single line list items, but when there are several lines, the text edge no longer aligns. With the example used above I added margin-left:-20px to the :before code and text-indent:0 to the list item to fix it.

    When using wider characters you may have to adjust the margin figure and add a right margin to the :before code for a gap.

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *