Comment supprimer l'effet de soulignement des hyperliens avec CSS

Lorsque vous créez des hyperliens (aussi appelés "liens") sur votre site Web, par défaut, ils apparaissent avec un soulignement. C'est un indicateur traditionnel qui permet aux internautes de distinguer immédiatement ces textes interactifs. Cependant, dans certains cas, vous pouvez préférer supprimer ce soulignement pour des raisons esthétiques ou pour respecter les directives de votre charte graphique.

Le moyen le plus simple et le plus efficace de le faire est d'utiliser une règle CSS appelée text-decoration. La bonne réponse à la question posée est donc : "décoration du texte : aucune;".

Voici comment vous pouvez utiliser cette règle dans votre code CSS :

a {
  text-decoration: none;
}

En CSS, a cible les liens hypertextes. L'attribut text-decoration: none; retire toute forme de décoration du lien, y compris le soulignement par défaut.

Il est également possible d'ajouter cette règle directement dans l'élément HTML en utilisant l'attribut de style :

<a href="https://example.com" style="text-decoration: none;">Mon lien sans soulignement</a>

Cependant, il est généralement recommandé d'utiliser une feuille de style externe ou interne pour appliquer du style à vos éléments HTML. Cela facilite la maintenance de votre code et la cohérence de votre design.

Enfin, souvenez-vous que l'absence de soulignement peut rendre vos liens moins visibles. Assurez-vous donc d'utiliser d'autres moyens pour signaler vos liens, comme une couleur différente ou un effet au survol. Voici un exemple :

a {
  text-decoration: none;
  color: blue;
}

a:hover {
  color: red;
}

Dans cet exemple, les liens apparaîtront en bleu et changeront de couleur pour devenir rouge lorsqu'un utilisateur passera son curseur par-dessus.