Controlling List Item Bullets with CSS – ASCII bullets

Using ASCII and UNICODE characters as Bullets with CSS

In non-IE browsers you can stylize lists to have any character as a bullet instead of the default bullet. You will find several sites now using the double right angle quote as a bullet. Many people find the default bullet too large, and prefer to use the middot. Legal documents may find the section symbol (§) useful, and poker players may get a kick out of using spades (♠).

To control the bullet character, you need to remove the default list style, add your character of choice using the :before pseudo-class, add a left margin to indent the entire list item content and provide a negative indentation to make the bullet character that is a part of the first line appear as a bullet.

CSS content does not accept named entities or regular numeric entities such as ”, but does render unicode hexadecimal characters preceded by a backward slash.

Here is sample code:

html>body ul {
    margin: 0;
    padding: 0 0 0 1.2em;
    list-style: none;
    text-indent: -1.2em;
    }

html>body  li {
    margin: 0 0 0 1em;
    }
    
ul li:before {
    content: "\00BB \0020";
    color: #ff0000;
    font-size: 0.8em;
    }

The content content: "\00BB \0020" above creates a right angle quote appearing as: » followed by a space. There are many other characters that you can use, but this is the most common. For a list of unicode entities check out the list of named HTML entities listed in numeric order. There is a briefer list of named entities in alphabetical order that is a good place to find the entity you are looking for, then got to the numerically ordered entity list which provides more detailed information. If you know the numeric entity, you can also use the CSS Entity Calculator to get the correct code for that character.

The other cool thing is you can stylize the content added content in the :before pseudoclass.

  • list item one
    second line of this first item
  • list item two
  • list item three

The style I used for the above list is:

<style type="text/css">
html>body ul.bulleted {
    margin: 0 0 0 2em;
    padding: 0 0 0 1.2em;
    list-style: none;
    text-indent: -1.2em;
    *text-indent: 0;
    *list-style-type: disc;
    }

html>body ul.bulleted li {
    margin: 0 0 0 1.2em;
    }
    
ul.bulleted li:before {
    content: "\2666 \a0 \a0 \a0";
    color: #993366;
    font-size: 0.85em;
    line-height:80%;
    }
</style>

Notes:

  • if you notice a double slash (\) in the code above, it really should be a single slash. With FF, the default for <code> thinks I am escaping the next letter, so I had to escape the slash to show the actual code. In some browsers this was an issue, in others it wasn’t. It should only be one slash.
  • As mentioned earlier, IE does not comprehend the :before pseudo-class (see IE7 CSS Selectors: how they fail), but IE7, unlike IE6, does understand html>body so I’ve used the simple star hack to give IE7 back the bullet and IE7 specific margin/padding. You can use any IE7 hack. This was the simplest, but doesn’t validate.
  • See: Creating lists with Images as Bullets using CSS
This entry was posted in Character Entities, CSS (including hacks), Web Development. Bookmark the permalink.

2 Responses to Controlling List Item Bullets with CSS – ASCII bullets

  1. Brad says:

    After hours of hairpulling, and another hour of fruitless googling… your code snippet worked perfectly…

    Controlling the distance between the bullet and the actual text is now doable… Thanks!

  2. Pingback: Blog » Blog Archive » Creating lists with Images as Bullets using CSS

Leave a Reply

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>