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:

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.

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.

Featured image by Thomas Bormans.

Comments (4)

Previously posted in WordPress and transferred to Ghost.

Thomas Böttiger
May 23, 2013 at 3:13 pm

Using the :before attribute I found the character hanging above the list element, so I added a float:left and a negative margin. That solved the problem.

Ryan Sechrest
May 23, 2013 at 7:50 pm

Thanks for the tip, Thomas!

judyofthewoods
June 7, 2015 at 9:40 am

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.

Bob
November 10, 2020 at 2:32 pm

I like positioning before absolute so I have total control of where it is and it works with multiple lines. The class is just in case you want to style just one list this way and not the whole site. If you don’t need it delete it.

.systems-col ul {
  padding: 0;
  margin: 0;
}
.systems-col li {
  list-style: none;
  padding-left: 15px;
  position: relative;
}
.systems-col li:before {
  color: #979797;
  content: ‘> ‘;
  font-size: 1.2em;
  position: absolute;
  top: -4px;
  left: 0;
}