How to automatically add &raquo; (») to <li> elements using CSS?

I want to automatically add the HTML character » (») to the left of each li element.

What would be the best practise?

I want the HTML to be:

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

And it should display:

» item 1
» item 2
» item 3

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

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

This uses the hexadecimal code for » instead.

A nice hexadecimal converter can be found here.

Hope this helps someone :)

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; }