Square Colored Bullets with a Consistent Size Across Platforms

I don’t write very often. So I suppose that when I do, it should be of consequence.

Nah, I just happened to be narrowing down a technique the other day for a specific issue, and thought I had something unique to contribute. Here, in a nutshell, is the task:

Can we have colored bullets without having to produce a little graphic?

Yes, we can, as Lea Verou answered when a user asked this question on Stack Overflow. You give the li element list-style: none, natch. And then you add a bullet with the CSS :before declaration.

The CSS looks like this:

(Note: You also need to set a negative text-indent—Lea suggests -.7em—and left padding. If you aren’t saving your stylesheets as UTF-8, you’ll also need to use the escaped unicode character for the bullet, like-a-dis: content: "\2022; ";)

li:before {
    content: "• ";
    color: red; /* or whatever color you prefer */
}

This gives us the following:

• Example

The Stack Overflow thread goes on to mention using a square (■) instead of a disc, which is exactly what I needed for a client’s site. But I quickly noticed that the font-size of the square in different browsers and platforms was radically different:

Huh. The main issue was Windows vs. Mac. If we are going to avoid adding little square bullet images (the old way) this has to be more reliable & consistent than this.

One eyebrow furrow later, (okay maybe more than that) I thought—different font? So what would be cross-platform? Using a handy CSS font-family list developed by Unit Interactive, I maniacally set up square bullets in different font-sizes for comparison (See example) and found that across browsers, the following font-stack was the most consistent:

font-family: AppleGothic, "Lucida Sans", Impact, Verdana, sans-serif;

It was also consistently too small. The best bullet look utilized this CSS:

ul { padding: 0 30px; }

li { list-style: none; }

li:before {
    font-family: AppleGothic, "Lucida Sans", Impact, Verdana, sans-serif;
    content: '■';
    color: red;
    float: left;
    width: 1em;
    margin: .5em -1.2em;
    font-size: 60%;
}

And there we have it:

• Square bullets, colored differently from the text, without images.