How to make a vertical CSS menu with arrows on the right of each entry?

Question

I've been trying to get this working for a really long time and am totally stumped. There are tons of articles on the net on how to make a basic CSS list menu, but I'm wanting to make one that looks like this:

Line 1          >>
Line 2          >>
Line 3          >>

Where all of each line is a link (the text, whitespace, and arrows).

I've tried everything I can think of and nothing has worked. I'm sure this is pretty simple to do if you know what you're doing, so can anyone help me out?

Here is what I currently have:

<style type="text/css">
    ul.menu {
        padding: 0;
        margin: 0;
        font-size: 16px;
    }

    ul.menu > li {
        display: block;
        width: 100%;
    }

    ul.menu > li:hover {
        color: red;
    }

    ul.menu > li a {
        display: block;
        width: 100%;
    }

    ul.menu > li > a:hover {
        background-color: #F7F7F7;
    }
</style>

<ul class="menu">
    <li>
        <a href="">Line 1</a>
    </li>
    <li>
        <a href="">Line 2</a>
    </li>
    <li>
        <a href="">Line 3</a>
    </li>
    <li>
    <a href="">Line 4</a>
    </li>
</ul>

Answer 1

Quickest way is with a background image (set on the li or a , depending your design needs):

background:transparent url("http://placehold.it/25x25") right center no-repeat;

http://jsfiddle.net/daCrosby/8aTvn/1/

Answer 2

You can use css :after properties to achieve this.

DEMO http://jsfiddle.net/yeyene/dnPN4/

CSS

ul.menu > li a:after  { 
    content:" »";
}

IE 9+ and all major browsers will support :after , however it is not supported in IE 7 or lower and IE 8 only supports it with a DOCTYPE declared.