automatically add » to li's

Question

I want to automatically add the html character » to the left of each li element

How I do that?

So I want to type the html

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

and it displays

>> item 1
>> item 2
>> item 3

Answer 1

Use CSS :before Psuedo Element

li:before{
   content: "»»";
}

Most likely you also will want to add a little padding to the 'bullets', if so you can style the :before just like anything. So:

li:before{
   content: "»»";
   padding-right: 10px;
}

will intend the li 10px,

Also, check the comment below for a different value to put into the content: '' using hex code instead.

Answer 2

I found the above answer didn't work for me, but the following does:

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

This uses the hexadecimal code for &raquo instead.

A nice hexadecimal converter can be found here.

Hope this helps someone :)

Answer 3

If you don't want the arrows to appear as content then why not go for a css background?

li { background: url("raquo.gif") no-repeat left center; }