Supprimer le soulignement tenace du lien


542

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?


1
Eh bien, cela devrait disparaître lorsque vous faites de la décoration de texte: aucun. Êtes-vous sûr de l'appliquer au bon élément? Pouvez-vous fournir un exemple de code?
Davor Lucic

Où est la décoration de texte: aucune n'est utilisée?
shuttle87

Réponses:


772

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

12
Mais que se passe-t-il si vous avez également du texte autour de la plage et que vous voulez que le texte environnant soit souligné, mais que le texte dans la plage n'en ait pas?
JMTyler

4
@rebus, vous ne pouvez pas? Pourquoi pas? Parce qu'au moins IE7 + et FireFox 4+ vous le pouvez, mais pas dans Chrome pour une raison quelconque. Voici le code que j'ai pu .toc-list a > span{text-decoration:none !important;} utiliser dans les navigateurs non Chrome que j'ai testés: je pense que la question de @ JMTyler est légitime; Je cherche la même solution.
Tony Topper

7
Il semble text-decorationne pas prendre en charge la substitution des balises imbriquées, comme indiqué ci-dessus. Une fois qu'une a { text-decoration: underline; }règle est appliquée, vous ne pouvez pas la désappliquer, par exemple avec a .wish_this_were_not_underlined { text-decoration: none; }. Je ne trouve pas de référence pour cela, mais c'est mon expérience (dans Chrome).
Partiellement nuageux

2
Comme les autres ci-dessus, je n'ai pas été en mesure de sous-souligner le texte en appliquant text-decoration: none;, nous avons donc choisi de masquer la ligne à l'aide text-decoration: underline; text-decoration-color: white;. / hack
Ryan Burbidge

1
si vous essayez uniquement de supprimer le soulignement d'un élément à l'intérieur d'une ancre, et non la totalité de l'ancre. vous devez faire de l'élément interne un bloc en ligne comme ceci: .boxhead .otherPage { display: inline-block; color: #FFFFFF; text-decoration: none; }
Patrick Denny

213

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.


5
Je pense que tu veux dire a:linkquand tu disa:click
artlung

6
Cela devrait être la réponse réellement acceptée, car j'avais le même problème APRÈS avoir cliqué sur le lien de mon bouton. La propriété visitée changeait toujours en violet lorsque je suis revenu sur la page.
Doresoom

33

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)


4
Le réglage l'a border-bottom-style: none;corrigé pour moi.
Helder S Ribeiro

27

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

16

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

1
Celui-ci devrait être la réponse. Parfois, l'ombre de la boîte donne un effet de soulignement.
Bhargav

C'est une réponse, mais pas la meilleure. Leur portée est globale et non spécifique. Quelque chose comme ça devrait faire l'affaire: .otherPage a:link {text-decoration:none;}; répétez cela pour les visités, actifs et survolez si nécessaire.
Ajowi

14

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

entrez la description de l'image ici


9

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.


9

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.


4

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!


assurez-vous que son sur la balise d'ancrage et en ligne pourrait être mieux car vous voudrez peut-être le soulignement sur d'autres liens.
Asuquo12

2

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


1

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.


1

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.



0

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;")

0

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

0

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

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


0

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


0

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;
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.