Souligner les liens au stylo bille

Un effet facile à faire sur les liens et qui donne un coté "scolaire" à un site internet est celui qui consiste à avoir des liens souligné au stylo bille, voyons cela tout de suite, pour commencer on a un paragraphe avec un lien :

<p>Lorem ipsum dolor sit amet, <a href="#">consectetur adipiscing</a> elit. Ut ut justo justo, vitae sodales mi.</p>

On a également besoin d'une image qui va représenté le soulignement au stylo, je vais utiliser celle ci :

Vous pouvez enregistrer cette image et l'utiliser ou bien refaire la votre c'est assez simple à faire, cette image on la place dans un dossier images pour garder un site propre et on va créer ensuite le style suivant dans la feuille de style :

a {
    color:#000;
    text-decoration:none;
    background:url(images/souligne.png) repeat-x 100%;
    padding-bottom:15px;
}
a:hover {
    color:#369;
}

quelques explications, c'est un style pour les balises <a> qui sont les balises de lien, on leur donne la couleur noire #000 (ce n'est pas obligatoire), puis on supprime le soulignement par défaut avec la propriété text-decoration:none comme on a plus de lien souligné on peut ajouté en image de fond notre ligne bleu au stylo avec la propriété background, on indique également que ce background se répète uniquement sur l'axe des x (donc horizontalement), enfin on ajoute une marge interne avec margin-bottom pour décalé le soulignement sous le texte et voilà le résultat :

Une petite info en plus, certains anciens navigateur (IE) pourrait avoir du mal avec ce style dans ce cas il y a une astuce pour leur donner un style différent en procédant ce cette facon :

a {
    color:#000;
    text-decoration:none;
    background:url(images/souligne.png) repeat-x 100%;
    padding-bottom:15px;
    /background:none;
    /border-bottom:1px solid #369;
    /padding-bottom:0;
}

les propriétés de styles avec un / ne seront comprise que pas le navigateur fautif qui aura donc un soulignement classique bleu à la place de l'image.