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.
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.
Thanks for the tip, Thomas!
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.
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;
}