Question Enlever le soulignement têtu du lien


J'essaie d'avoir un lien en blanc, sans souligné. La couleur du texte s'affiche correctement en blanc, mais le trait de 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?


412
2018-05-07 15:29


origine


Réponses:


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

621
2018-05-07 15:50



La balise d'ancrage (link) a aussi des pseudo-classes telles que visited, hover, link et active. Assurez-vous que votre style est appliqué à l'état (s) en question et qu'aucun autre style 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 de l'utilisateur: hover,: active et: focus.


171
2018-05-07 15:35



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


26
2018-05-07 15:35



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

22
2017-12-11 05:52



Vous avez raté text-decoration:none pour le balise d'ancrage. 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


8
2018-01-19 12:50



Sans voir la page, difficile à spéculer.

Mais il me semble que vous pourriez avoir un border-bottom: 1px solid blue; étant appliqué. Peut-être ajouter border: none;. text-decoration: none !important est vrai, il est possible que vous ayez un autre style qui surcharge toujours ce CSS.

C'est où en utilisant le Firefox Web Developer Toolbar est génial, vous pouvez éditer le CSS juste là et voir si les choses fonctionnent, au moins pour Firefox. C'est sous CSS > Edit CSS.


7
2018-05-07 15:44



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

N'oubliez pas de retirer la bordure de vos pseudo-classes aussi!

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

Cet extrait suppose son sur une ancre, changez son enveloppe en conséquence ... et utilisez la spécificité au lieu de "! Important" après que vous ayez trouvé la cause première.


7
2018-05-07 20:30



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

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

7
2018-03-11 22:58



Alors que les autres réponses sont 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 SIMPLE sur votre page!


2
2018-06-30 18:23