web-dev-qa-db-fra.com

Couleur de soulignement de la décoration de texte CSS

Duplicate possible:
Changer la couleur du soulignement

Il est possible de changer uniquement la couleur de la ligne 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.

csstext-decorations
90
Wizard

(pour les autres utilisateurs, copie de question dupliquée ) Cette réponse est obsolète puisque text-decoration-color est désormais prise en charge par la plupart des navigateurs modernes. .

Vous avez probablement besoin de cela en plaçant 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;
}
114
Rob

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

a {
  color: #258;
  text-decoration: underline;
}
span {
  color: #d43;
  text-decoration: none;
}
<a href="#">
  <span>Text</span>
</a>
116
Cherusker

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

.underline 
{
    color: blue;
    border-bottom: 1px solid red;
}
<div>
    <span class="underline">hello world</span>
</div>
15
Luis

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 cool de cette façon:

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

J'espère que ça aide.

5
codenighter