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:

The square bullets were looking different across browsers. For this client, that would not do.

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.

Join the Conversation

1 Comment

  1. thanks Jeremy for an informative site…

    also, the code
    •  More segue to solar products info

    will produce ‘• More segue solar products info’

    – for the uninformed, this uses ascii code. Just google ascii code for html…

Leave a comment

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