Modification <a> lien couleur de soulignement

Je me demande si il existe une astuce pour résoudre ce problème.

J'ai mon lien comme ci-dessous un texte et que vous voulez changer la couleur de soulignement.

Ce lien contient le nombre de lignes qui a besoin de changer la couleur de soulignement pour être plus léger que celui

À l'aide de la frontière du bas n'est pas la façon de résoudre ce problème, car plusieurs lignes.

sont il une astuce pour résoudre ce problème?

MODIFIER

@Paolo Bergantino: Il fonctionne avec IE8 , est-il possible de pirater avec IE6,7?

  • Il ne fonctionne pas pour moi sur IE7 soit, en fait. C'est bizarre.
  • ah, j'essai de mal windows, fonctionne uniquement sur IE8
  • Désolé, je n'ai pas été en mesure de trouver quoi que ce soit.
  • C'est ok, j'ai essayer aussi, mais pas encore trouver quoi que ce soit encore. Merci pour votre aide 🙂
InformationsquelleAutor pang | 2009-07-24
  1. 31

    Si ce que tu veux dire, c'est une autre couleur de soulignement que ce que le texte est, la seule chose que je peux penser est d'ajouter une durée de autour de le lien:

    <span class='underline'>
    <a href="#">this just<br>a test<br>of underline color</a>
</span>

    Et puis le CSS:

    span.underline { 
    color: red; 
    text-decoration: underline; 
} 
span.underline a { 
    color: blue; 
    text-decoration: none; 
}

    Et vous obtenez ce que vous voulez.

    MODIFIER:

    De tester ce un peu plus, il ne fonctionne pas sur IE. Si vous ajoutez de la frontière-bas, cependant, il étonnamment fonctionne dans tous les navigateurs, sauf que IE ne met pas une frontière sous le dernier. Je vais essayer de creuser un peu plus pour voir si il y a une manière de croix-navigateur pour ce faire...

    • Cet exemple pourrait être encore plus cool si tous les principaux navigateurs pris en charge la :before et :after pseudo-sélecteur.
    • Qui va affecter tous les lien des sélecteurs, de sorte qu'un utilisateur ne sera pas en mesure de distinguer ce lien qu'ils ont visités.
    • Je vais faire une note de la ce pour référence future, c'est tellement simple mais fonctionne parfaitement.
    InformationsquelleAutor Paolo Bergantino
  2. 15

    Paolo Bergantino la réponse ne semble pas fonctionner pour moi dans Chrome sur mac OSX (v19.0.1084.56). Mais le passage de la durée de l'intérieur de la balise semblait faire l'affaire.

    Le code HTML

    <a class="underline" href="#">
    <span>Hello world<br />this is a test<br />of changing the underline colour</span>
</a>​

    Et le CSS

    .underline{
    color: red;           
}

.underline span{
    color: gray;           
}

    Vous pouvez le voir ici: http://jsfiddle.net/itsmappleby/f4mak/

    • Fonctionne sur FF, IE6-10, Chrome, Safari.
    InformationsquelleAutor themarkappleby
  3. 7

    Dans le cas où quelqu'un est intéressé - ce qui a fonctionné pour moi - text-decoration-couleur de la propriété CSS:

    .example { 
    text-decoration: underline;
    text-decoration-color: red;
}

    https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration-color

    • La solution idéale, mais c'est toujours pas pris en charge par chrome 🙁
    • C'est la propriété à utiliser pour les navigateurs modernes.
    InformationsquelleAutor ColinMcDermott
  4. 3

    Ou vous pouvez utiliser de la frontière. Cette méthode de travail à ie6.

    HTML

    <a href="#" class='underline'>
  <span>this just</span><br/>
  <span>a test</span><br/>
  <span>of underline color</span>
</a>

    CSS

      a.underline {
    text-decoration: none;
  }
  a.underline span {
    display: inline-block;
    border-bottom: 1px solid red;
    font-size: 15px;
    line-height: 12px;
  }

    et exemple: http://jsfiddle.net/skanY/1/embedded/result/

    • -1 l'inconvénient de cette est que vous avez à payer une plus grande attention au contenu de la <a> tag. Si le texte est en s'enveloppant dans une boîte, plutôt que de vous insérer des pauses, ce n'est pas d'aller travailler.
    • en fait, vous pouvez remplacer "inline-block" pour "inline", et cela fonctionne, mais pas correctement
    • Si vous pouviez expliquer que, dans votre réponse que je peux retirer mon downvote! Apparemment je ne peux pas jusqu'à ce que la réponse est édité. En quoi il ne fonctionne pas correctement?
    • Vous pouvez supprimer "inline-block" comme ceci jsfiddle.net/skanY/4. Ensuite, si le texte est en s'enveloppant dans une boîte, soulignent afficher correctement, mais plus faible que dans shold être.
    InformationsquelleAutor lastbyte
  5. 2

    Souligné, étant un attribut de texte, hérite de la couleur du texte. Donc, je doute qu'il y est un moyen de modifier explicitement la couleur de soulignement, sans modifier la couleur du texte.

    InformationsquelleAutor Joey
  6. 2

    Le Soulignement des liens seront toujours de la même couleur que le texte.

    InformationsquelleAutor Chris Pietschmann
  7. 1

    désolé pour ressing une vieille question, mais j'ai eu le même problème, et n'ai pas trouvé une réponse satisfaisante, alors je suis venu avec une solution différente et j'ai pensé partager avec vous.

    il inclut une 1x1 image d'arrière-plan (ou de n'importe quelle taille que vous préférez), mais c'est propre et simple et 100% compatible avec les navigateurs (testé à partir de IE6 et jusqu').

    dans cet exemple, le texte qui change de couleur, et la ligne reste la même. vous pouvez facilement le faire en sens inverse.

    a, a:link, a:active, a:visited{
    text-decoration:none;
    color:#888;
    background:transparent url('underline.png');
    background-position:0 10px;
    background-repeat:repeat-x;
}

a:hover{
    color:#009ee0;
}
    InformationsquelleAutor labtoy
  8. 1

    Je sais que c'est une vieille question, mais je pensais que je voudrais ajouter ceci...

    a:active, a:link, a:visited{
    background-image: linear-gradient(rgba(255,255,255,0)50%, #ff5400 50%);
    text-decoration: none;
    background-size: 2px 2px;
    background-position: 0 1.2em;
    background-repeat: repeat-x;
}

    Remarque: les Anciennes prise en charge du navigateur n'est pas complètement pris en charge

    InformationsquelleAutor Paul Dessert
  9. 0

    le soulignement des liens se fait à l'aide de la css text-decoration de style, je pense que c'est de la même couleur que le texte.

    si vous définissez le texte de décoration à rien, puis ajouter une bordure-bas, vous pouvez changer la couleur de la bordure-style de couleur.

    InformationsquelleAutor John Boker
  10. -1

    Aussi, vous pouvez utiliser ce code pour le souligne avec une couleur différente. Utilisez les Frontières

    h1{ 
border-bottom: 1px solid #AAAAAA 
}

    edit:
    vous pouvez utiliser le java script pour dessiner une ligne sous le texte

    • Bienvenue à Débordement de Pile! Malheureusement, votre réponse ne me semble pas utile ici: l'OP a dit expressément qu ' "à l'Aide de la frontière du bas n'est pas la façon de résoudre ce problème, car plusieurs lignes."
    InformationsquelleAutor Sri Harsha Chilakapati