Comment supprimer le soulignement des ancres (liens)?


313

Y a-t-il quand même (en CSS) pour éviter le soulignement du texte et des liens introduits dans la page ..?


8
<penantic> Vous ne pouvez jamais supposer comment un navigateur rendra votre code HTML. une balise affiche une ancre que le navigateur choisit d'afficher comme soulignée par défaut. u est la seule balise de soulignement. les réponses ci-dessous sont des réponses CSS </pendantic>
Compte mort le

44
L'ironie que quelqu'un soit assez pédant pour faire ce commentaire, mais pas assez pédant pour épeler le mot correctement (ou même régulièrement!) Me souffle.
Technetium

En plus des réponses ci-dessous, la manipulation a:hoverdoit également être prise en compte, les navigateurs les plus populaires ont tendance à souligner les ancres lors du survol.
Fr0zenFyr

Réponses:


517

Utilisez CSS. cela supprime les soulignements aet les uéléments:

a, u {
    text-decoration: none;
}

Parfois, vous devez remplacer d'autres styles pour les éléments, auquel cas vous pouvez utiliser le !importantmodificateur sur votre règle:

a {
    text-decoration: none !important;
}

1
Si color: black !important;est ajouté pour body, cela définira-t-il également tous les éléments, y compris les ancres, les ancres visitées, les ancres planées pour être toujours noirs?
Ωmega

Ωmega Δ, apparemment non, et grâce à vous l'avoir signalé, j'ai trouvé une erreur dans la règle générale du corps. J'ai mis à jour ma réponse.
Emil Vikström

Ce que j'ai trouvé, c'est que si vous définissez le style text-decoration: none !important;pour l' bodyélément, cela ne fonctionne pour les ancres que lorsque vous définissez explicitement le style text-decoration: inherit;pour les aéléments.
Ωmega

7
Il est généralement préférable d'éviter !importantet d'utiliser la spécificité et la cardinalité pour remplacer les styles, sinon vous pouvez vous retrouver avec une feuille de style pleine !importantsans aucune compréhension de la structure qui la rend nécessaire. C'est une odeur de code IMO.
Mike Lyons

!importantc'est comme avoir une bombe nucléaire. Mais une fois que vous démarrez et êtes séduit par l'utilisation d' !importantautres éléments, vous pouvez l'obtenir (nuke) et l'avantage est parti en faveur d'une impasse, ce qui est formidable pour le monde, car la MUD assure la paix, mais dans le monde du CSS, une telle paix signifie que vous ne pouvez pas donner à quelque chose l'avantage.
JasonGenX

27

Le CSS est

text-decoration: none;

et

text-decoration: underline;

16

Cela supprimera votre couleur ainsi que le soulignement avec lequel la balise d'ancrage existe.

 a {
     text-decoration: none ;
  }
a:hover
  {
    color:white;
    text-decoration:none;
    cursor:pointer;
   }

11

L'option la plus simple est la suivante:

<a style="text-decoration: none">No underline</a>

Bien sûr, mélanger CSS avec HTML (c'est-à-dire CSS en ligne) n'est pas une bonne idée, surtout lorsque vous utilisez des abalises partout.
C'est pourquoi c'est une bonne idée d'ajouter ceci à une feuille de style à la place:

a {
    text-decoration: none;
}

Ou même ce code dans un fichier JS:

var els = document.getElementsByTagName('a');

for (var el = 0; el < els.length; el++) {
    els[el].style["text-decoration"] = "none";
}

Iphone / Android ne sont pas de bons repères car ils ne représentent pas le rendu HTML en arrière de Gmail ou Outlook.
Stuart

@XLogic: Merci beaucoup
Monika Patel


6

Meilleure option pour vous si vous souhaitez simplement supprimer le soulignement du lien d'ancrage uniquement -

    #content a{
                text-decoration-line:none;
                }

Cela supprimera le soulignement.

De plus, vous pouvez également utiliser une syntaxe similaire pour manipuler d'autres styles en utilisant-

                text-decoration: none;
                text-decoration-color: blue;
                text-decoration-skip: spaces;
                text-decoration-style: dotted;

J'espère que cela t'aides!

PS- Ceci est ma première réponse!


4

dans mon cas, il y avait une règle sur l'effet de survol par l'ancre, comme ceci:

#content a:hover{
border-bottom: 1px solid #333;
}

Bien sûr, text-decoration:none;ne pouvait pas aider dans cette situation. Et je passe beaucoup de temps jusqu'à ce que je le découvre.

Donc: un trait de soulignement ne doit pas être confondu avec un fond de bordure.



2

Pour donner une autre perspective au problème (comme déduit du titre / contenu du message d'origine):

Si vous souhaitez rechercher ce qui crée des soulignements voyous dans votre code HTML, utilisez un outil de débogage. Vous avez l'embarras du choix:

Pour Firefox, il y a FireBug;

Pour Opera, il y a Dragonfly (appelé "Developer Tools" dans le menu Tools-> Advanced; livré avec Opera par défaut);

Pour IE, il y a la "barre d'outils des développeurs Internet Explorer", qui est un téléchargement séparé pour IE7 et inférieur, et est intégrée dans IE8 (appuyez sur F12).

Je n'ai aucune idée de Safari, Chrome et d'autres navigateurs minoritaires, mais vous devriez probablement avoir au moins l'un des trois ci-dessus sur votre machine.



1

Lorsque vous souhaitez utiliser une balise d'ancrage simplement comme lien sans que le style ajouté (comme le soulignement au survol ou la couleur bleue) s'ajoute class="no-style"à la balise d'ancrage. Ensuite, dans votre feuille de style globale, créez la classe "sans style".

.no-style { text-decoration: none !important; }

Cela présente deux avantages.

  1. Cela n'affectera pas toutes les balises d'ancrage, seulement celles avec la classe "no-style" qui leur est ajoutée.
  2. Il remplacera tout autre style qui pourrait autrement empêcher de définir la décoration de texte sur aucun.

0

N'oubliez pas non plus d'inclure des feuilles de style à l'aide de la balise de lien

http://www.w3schools.com/TAGS/tag_link.asp

Ou insérez CSS dans une balise de style sur votre page Web.

<style>
  a { text-decoration:none; }
  p { text-decoration:underline; }
</style>

Je ne recommanderais pas d'utiliser le soulignement sur autre chose que des liens, le soulignement est généralement accepté comme quelque chose qui est cliquable. S'il n'est pas cliquable, ne le soulignez pas.

Les bases CSS peuvent être récupérées dans w3schools


0
<u>

est une balise obsolète.

Utilisation...

<span class="underline">My text</span>

avec un fichier CSS contenant ...

span.underline
{
    text-decoration: underline;
}  

ou juste...

<span style="text-decoration:underline">My Text</span>

0

Utilisez la propriété css,

text-decoration:none;

Pour supprimer le soulignement du lien.


0

Le soulignement peut être supprimé par une propriété CSS appelée décoration de texte.

<style>
a{
text-decoration:none;
}
</style>

Si vous souhaitez supprimer le soulignement du texte présent dans les éléments autres que a , la syntaxe suivante doit être utilisée.

<style>
element-name{
text-decoration:none;
}
</style>

Il existe de nombreuses autres valeurs de décoration de texte qui peuvent vous aider à créer des liens.


-1

J'ai été troublé par ce problème dans l'impression Web et résolu. Résultat vérifié.

a {
    text-decoration: none !important;
}

Ça marche!.

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.