Comment est fait ce underline d'une couleur différente du texte du lien ?

**psychoBob** · 25/06/2006, 23h28

Bonjour,

Si vous allez sur cette page :

http://www.albertdupontel.com/blog/blog.html

Vous verrez qu'en haut à droite il y a une adresse email :adupontel@gmail.com

Et si on passe le curseur dessus, le lien de soulignement est jaune tandis que le texte reste blanc.

Or ce n'est pas une astuce du type a:hover border-bottom 1px solid #FFFF00 car le lien coupe les lettres, donc c'est normalement un vrai underline.

Comment ils font pour avoir deux couleurs ? J'ai regardé la feuille de style, ça ne m'a pas sauté aux yeux.

**NouR7** · 25/06/2006, 23h43

Je viens de tester et je pense avoir trouvé :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<html>
<head>
<style type="text/css">
a:hover {
color:#FFCF3D;
text-decoration:underline;
}
</style>
</head>
 
<body bgcolor="#000000">
<a href="mailto:ccorbesier@gmail.com"><font color="#FFFFFF">mailto</font></a>
</body>
</html>

Par contre, si on passe la balise font et son attribut color dans leurs équivalents CSS, je ne pense pas que ça fonctionne.
Ca vient du fait que le navigateur traite d'abord le lien et donc le a:hover et ensuite le font color

**Eric Berger** · 25/06/2006, 23h44

Il s'agit d'une petite astuce...

La feuille de style définit la couleur des liens en jaune

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
a:hover {
  color:#FFCF3D;
  text-decoration:underline;
  }

Mais dans le code source, on a:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<a href="mailto:adupontel@gmail.com"><font color="white">adupontel@gmail.com</font></a>

Une balise font imbriquée dans le lien force le texte à s'afficher en blanc et suplante l'information de la feuille de style, mais uniquement pour le texte, pas pour le soulignement.

Il fallait y penser

**psychoBob** · 25/06/2006, 23h59

Bien vu les gars !

C'est dans les cartons, ça pourra resservir plus tard.

**franculo_caoulene** · 26/06/2006, 11h11

A savoir que cette solution n'est pas forcément la plus maligne. C'est l'éternel problème du changement de design du site. Avec cette méthode on est obligé de parcourir toutes les pages et de changer toutes les balises <font>.

La solution à garder et celle du border-bottom dans le CSS.