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:
<html>
<head>
<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";
}
</style>
</head>
<body>
<ul>
<li>list item 1</li>
<li>list item 2</li>
<li>list item 3</li>
</ul>
</body>
</html>
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:
- W3: http://www.w3.org/TR/CSS2/generate.html
- ASCII Code: http://www.ascii-code.com
