web-dev-qa-db-fra.com

Supprimer le soulignement têtu du lien

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

Le HTML:

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

Le CSS:

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

Comment puis-je supprimer le soulignement bleu du lien?

csshyperlinkunderline
448
dmr

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;
}
676
Davor Lucic

La balise d'ancrage (lien) comporte également des pseudo-classes telles que visitée, survolée, lien et active. 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 pseudo-classes d'action utilisateur: survol,: actif et: focus.

186
JYelton

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

27
Alex K.

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;
}
23
Nagarajan S R

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;
}
11
jeffmjack

Vous avez manqué text-decoration:none pour la balise anchor. Donc, le code devrait 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

 enter image description here

9
Santosh Khalse

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

N'oubliez pas de supprimer également la frontière de vos pseudo-cours!

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

Cet extrait de code suppose qu'il repose sur une ancre, changez son enveloppe en conséquence ... et utilisez la spécificité au lieu de "! Important" après avoir recherché la cause.

7
Joel Crawford-Smith

Sans voir la page, difficile de spéculer.

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

C’est là que la barre d'outils Firefox Web Developer est géniale, vous pouvez modifier le code CSS à cet endroit et voir si tout fonctionne, du moins pour Firefox. C'est sous CSS > Edit CSS.

7
artlung

Bien que les autres réponses soient correctes, il existe un moyen simple de supprimer le soulignement de tous ces liens embêtants:

a {
   text-decoration:none;
}

Cela supprimera le soulignement de CHAQUE SEUL LIEN sur votre page!

2
yarz-tech

Il suffit d'utiliser la propriété

border:0;

et vous êtes couvert. A fonctionné parfaitement pour moi lorsque la propriété de décoration de texte fonctionne à tout.

1
MK Sandhu

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. Quel que soit le lien, la couleur du texte devient bleue et le lien reste tel quel.

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.

1
Neo

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

Vous pouvez utiliser ce code

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

OR

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

OR

a{text-decoration: none !important;}
0
Md Abul Bashar

Voici un exemple pour le contrôle asp.net webforms LinkButton:

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

Code derrière:

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

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

0
mwilcox

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

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

0
qarly_blue

Si text-decoration: none ou border: 0 ne fonctionne pas, essayez d'appliquer un style intégré dans votre code HTML.

0
Deke