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

user_26130 0
Viewed 80119

I want to automatically add the HTML character &raquo; (») 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
list css html
2 Answers

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 :)

user_712020

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