Couleur de soulignement de la décoration de texte CSS

Question

Dupliquer possible:
Changer la couleur de soulignement

Il est possible de ne changer que la couleur du trait qui est sous le texte? J'aimerais voir quelque chose comme des lettres rouges avec une ligne bleue en dessous, mais je ne peux pas trouver comment faire cela.

Answer 1

Vous avez probablement besoin de cela, en définissant votre mot avec un bord inférieur.

 a:link {
color: red;
text-decoration: none;
border-bottom: 1px solid blue;
}
a:hover {
border-bottom-color: green;
}
 

Answer 2

Vous pouvez le faire si vous enroulez votre texte dans une étendue comme:

HTML:

 <a href="#">
  <span>Text</span>
</a>
 

CSS:

 a {
  color: #258;
  text-decoration: underline;
}
span {
  color: #d43;
  text-decoration: none;
}
 

Answer 3

Autant que je sache, ce n'est pas possible ... mais vous pouvez essayer quelque chose comme ceci :

Balise HTML:

 <div>
    <span class="underline">hello world</span>
</div>​
 

Balisage CSS:

 .underline{
    color: blue;
    border-bottom:1px solid red;
}​
 

Answer 4

Vous ne pouvez pas changer la couleur de la ligne (vous ne pouvez pas spécifier différentes couleurs de premier plan pour le même élément, et le texte et sa décoration forment un seul élément). Cependant, il y a quelques astuces:

 a:link, a:visited {text-decoration: none; color: red; border-bottom: 1px solid #006699; }
a:hover, a:active {text-decoration: none; color: red; border-bottom: 1px solid #1177FF; }
 

Vous pouvez aussi créer des effets sympas de cette façon:

 a:link {text-decoration: none; color: red; border-bottom: 1px dashed #006699; }
 

J'espère que ça aide.