Ajout d'un texte à un lien sur le survol

Question

J'ai scanné les tubes pour essayer de trouver un moyen de le faire, mais je veux juste ajouter un signe supérieur à mon lien lorsque je le survole. Je ne veux pas utiliser d'images, j'essaie d'éviter les tableaux, etc. Voyez, je fais la partie frontale, et je suis un gars du back-end. Donc, je comprends les concepts, mais ne les mets pas en pratique.

Voici le code, pas sûr si c'est beaucoup d'aide.

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

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

Je sais, ce n'est pas assez, et l'idée d'un mariage de fusil de chasse avec CSS n'a pas été élevé sur ma liste de choses à faire aujourd'hui. Toute aide serait appréciée.

Je tiens simplement à dire "À propos de nous>", lorsque survolée.

Answer 1

probablement la solution la plus simple cross-browser:

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

.... 

li a span.showme { display: none } 

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

si vous ne voulez pas le lien pour changer sa taille en vol stationnaire, utilisez visibility: hidden/visible au lieu de 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: " >"; 
} 

Doit faire l'affaire.