Thursday, 21 February 2013

CSS list styling using ASCII special characters

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:
<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:
CharacterHEX codeDescription CharacterHEX codeDescription
2190Left arrow0088Left single angle quote
2192Right arrow009BRight single angle quote
2191Up arrow«00ABLeft double angle quote
2193Down arrow»00BBRight double angle quote
2660Spade card suit2023Triangle bullet
2663Club card suit2234Therefore
2665Hearts card suit266AEighth note
2666Diamond card suit266CTwo 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

No comments:

Post a Comment