CSS list styling using ASCII special characters

Posted in Coding | Tagged ASCII, css, list styling, special characters | Comments Off

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.

Note: this is copy  from anather web site