Appending text to a link on Rollover

Question

I have scoured the tubes to try and find a way to do this, but I just want to add a > greater-than sign to my link when I roll over it. I don't want to use images, I'm trying avoid tables, etc. See, I'm doing the front end, and I'm a back-end guy. So I understand the concepts, just don't put them into practice.

Here is the code, not sure if it is much help.

<ul>
    <li><a href="#">About Us</a></li>

and the css

li a:hover {
    font-size: 12px;
    text-transform: uppercase;
    color: #FC3;
    padding-left: 15px;
    height: 1px;
    width: 1px;
    border: thin solid #fff;
    padding-top: 10px;
    padding-right: 15px;
    padding-bottom: 10px;
}

I know, it's not pretty, and the idea of a shotgun wedding with CSS was not high on my list of things to do today. Any help would be appreciated.

I bascially want it to say "About Us >", when hovered over.

Answer 1

Probably the easiest cross-browser solution:

<a href="#">About Us <span class="showme">&gt;</span></a>

....

li a span.showme { display: none }

li a:hover span.showme { display: block }

if you don't want the link to change its size when hovering, use visibility: hidden / visible instead of display .

Answer 2

li a:hover {
    font-size: 12px;
    text-transform: uppercase;
    color: #FC3;
    padding-left:15px;
    height: 1px;
    width: 1px;
    border: thin solid #fff;
    padding-top: 10px;
    padding-right: 15px;
    padding-bottom: 10px;
}
li a:hover:after {
    content: " >";
}

Should do the trick.