Supprimer le soulignement tenace du lien

J'essaie de faire apparaître un lien en blanc, sans soulignement. La couleur du texte s'affiche correctement en blanc, mais le soulignement bleu persiste obstinément. J'ai essayé text-decoration: none;et text-decoration: none !important;dans le CSS de supprimer le lien souligné. Aucun n'a fonctionné.

.boxhead .otherPage {
  color: #FFFFFF;
  text-decoration: none;
}

<div class="boxhead">
  <h2>
    <span class="thisPage">Current Page</span>
    <a href="myLink"><span class="otherPage">Different Page</span></a>
  </h2>
</div>

Comment puis-je supprimer le soulignement bleu du lien?

Comme je m'y attendais, vous n'appliquez pas text-decoration: none;à une ancre ( .boxhead a) mais à un élément span ( .boxhead).

Essaye ça:

.boxhead a {
    color: #FFFFFF;
    text-decoration: none;
}

La balise d'ancrage (lien) a également des pseudo-classes telles que visité, survoler, lien et actif. Assurez-vous que votre style est appliqué à l'état ou aux états en question et qu'aucun autre style n'est en conflit.

Par exemple:

a:hover, a:visited, a:link, a:active
{
    text-decoration: none;
}

Voir W3.org pour plus d'informations sur les pseudo-classes d'action de l'utilisateur: hover ,: active et: focus.

text-decoration: none !importantdevrait le supprimer .. Êtes-vous sûr qu'il n'y a pas de border-bottom: 1px solidcachette? (Tracez le style calculé dans Firebug / F12 dans IE)

Ajoutez simplement cet attribut à votre balise d'ancrage

style="text-decoration:none;"

Exemple:

<a href="page.html"  style="text-decoration:none;"></a>

Ou utilisez la méthode CSS.

.classname a {
    color: #FFFFFF;
    text-decoration: none;
}

Parfois, ce que vous voyez est une ombre de boîte, pas un soulignement de texte.

Essayez ceci (en utilisant les sélecteurs CSS qui vous conviennent):

a:hover, a:visited, a:link, a:active {

    text-decoration: none!important;

    -webkit-box-shadow: none!important;
    box-shadow: none!important;
}

Vous avez raté text-decoration:nonela balise d'ancrage . Le code devrait donc suivre.

.boxhead a {
    text-decoration: none;
}

<div class="boxhead">
    <h2>
        <span class="thisPage">Current Page</span>
        <a href="myLink"><span class="otherPage">Different Page</span></a>
    </h2>
</div>

Plus de propriétés standard pour la décoration de texte

Sans voir la page, difficile de spéculer.

Mais il me semble que vous pourriez avoir une border-bottom: 1px solid blue;application. Peut-être ajouter border: none;. text-decoration: none !importanta raison, il est possible que vous ayez un autre style qui remplace toujours ce CSS.

C'est là que l'utilisation de la barre d'outils Firefox Web Developer est géniale, vous pouvez modifier le CSS ici et voir si les choses fonctionnent, au moins pour Firefox. C'est sous CSS > Edit CSS.

En règle générale, si votre "soulignement" n'est pas de la même couleur que votre texte [et que la "couleur:" n'est pas remplacée en ligne], il ne provient pas de "text-decoration:" Il doit être "border-bottom:"

N'oubliez pas de supprimer la frontière de vos pseudo-classes aussi!

a, a:link, a:visited, a:active, a:hover {border:0!important;}

Cet extrait suppose qu'il est sur une ancre, changez-le en conséquence ... et utilisez la spécificité au lieu de "! Important" après avoir recherché la cause première.

Bien que les autres réponses soient correctes, il existe un moyen facile de se débarrasser du soulignement sur tous ces liens embêtants:

a {
   text-decoration:none;
}

Cela supprimera le soulignement de CHAQUE LIEN SUR votre page!

Si text-decoration: noneou border: 0ne fonctionne pas, essayez d'appliquer le style en ligne dans votre html.

Utilisez simplement la propriété

border:0;

et vous êtes couvert. A parfaitement fonctionné pour moi lorsque la propriété de décoration de texte ne fonctionnait pas du tout.

Aucune des réponses n'a fonctionné pour moi. Dans mon cas, il y avait une norme

a:-webkit-any-link {
text-decoration: underline;

dans mon code. Fondamentalement, quel que soit le lien, la couleur du texte devient bleue et le lien reste quel qu'il soit.

J'ai donc ajouté le code à la fin de l'en-tête comme ceci:

<head>
  </style>
    a:-webkit-any-link {
      text-decoration: none;
    }
  </style>
</head>

et le problème n'est plus.

  a {
    color: unset;
    text-decoration: unset;
  }

Voici un exemple pour le contrôle LinkButton des formulaires Web asp.net:

 <asp:LinkButton ID="lbmmr1" runat="server" ForeColor="Blue" />

Code derrière:

 lbmmr1.Attributes.Add("style", "text-decoration: none;")

Vous avez utilisé text-decoration none dans le mauvais sélecteur. Vous devez vérifier la balise dont vous avez besoin pour la décoration.

Vous pouvez utiliser ce code

.boxhead h2 a{text-decoration: none;}

OU

.boxhead a{text-decoration: none !important;}

OU

a{text-decoration: none !important;}

Mettez le code HTML suivant avant la <BODY>balise:

<STYLE>A {text-decoration: none;} </STYLE>

Dans mon cas, j'avais un HTML mal formé. Le lien se trouvait dans une <u>balise et non dans une <ul>balise.

Comme d'autres l'ont souligné, il semble que vous ne pouvez pas remplacer les styles de décoration de texte imbriqués ... MAIS vous pouvez modifier la couleur de décoration du texte.

En tant que hack, j'ai changé la couleur pour qu'elle soit transparente:

texte-décoration-couleur: transparent;