CSS list styling using ASCII special characters

Posted in Coding | Tagged , , , | Comments Off on CSS list styling using ASCII special characters

When creating a list of items in HTML we have a choice of two list types: ordered <OL> and unordered <UL>. While for ordered list we have a number of options, unordered list can only be styled with: circle, disc or square markers.

  • circle
  • disc
  • square

But what about if we want to use something else, for example a special character like right double angle quotes » to make our list look like this:

  • list item 1
  • list item 2
  • list item 3

To do this we can use content property in conjunction with the :before pseudo-element.

Please note this property is NOT supported by IE6 and IE7.

The content property may contain: text strings, URI of external resources (an image for example), and ASCII code special characters. For high quality typesetting it is recommended using ISO 10646 characters and encoding them in their HEX representation.

In our case right double angle quote has HEX value of BB, to make it right we code 00BB.

ul li:before {
		 content: "\00BB";

we also need to add an extra space between text and special character, single space HEX is 20, so we add \0020

ul li:before {
		 content: "\00BB \0020";

Lets see the full code for this example:

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>CSS list styling using ASCII special characters</title>

<style type="text/css">

ul     	     {
		list-style: none;

ul li:before {
		content: "\00BB \0020";



<li>list item 1</li>
<li>list item 2</li>
<li>list item 3</li>


Note: we have to declare ul { list-style:none } to remove default list styling.

Result should look like the list below:

  • list item 1
  • list item 2
  • list item 3

You may like to style your list with one of these special characters:

Character HEX code Description   Character HEX code Description
2190 Left arrow 0088 Left single angle quote
2192 Right arrow 009B Right single angle quote
2191 Up arrow « 00AB Left double angle quote
2193 Down arrow » 00BB Right double angle quote
2660 Spade card suit 2023 Triangle bullet
2663 Club card suit 2234 Therefore
2665 Hearts card suit 266A Eighth note
2666 Diamond card suit 266C Two eighth note

There are lots of resources online with ASCII code, but most useful special characters can be found here: ASCII.

I hope you enjoyed this short tutorial and found it useful.

Source of text and images:

  1. W3: http://www.w3.org/TR/CSS2/generate.html
  2. ASCII Code: http://www.ascii-code.com

Comments are closed.