Supprimer le soulignement bleu du lien en CSS

1. Définissez la propriété text-decoration sur none pour supprimer le soulignement bleu d’un lien en CSS
2. Utilisez des pseudo-classes pour la sélection afin de supprimer le soulignement bleu d’un lien en CSS
3. Supprimer la propriété box-shadow pour supprimer le soulignement et la couleur d’un lien en CSS

Ce tutoriel présentera des méthodes pour supprimer le soulignement bleu formé dans le lien hypertexte en HTML. Nous utiliserons CSS pour supprimer un tel soulignement.

Définissez la propriété text-decoration sur none pour supprimer le soulignement bleu d’un lien en CSS

Nous pouvons utiliser la propriété text-decoration en CSS pour spécifier la décoration du texte. La propriété est une propriété abrégée de trois autres propriétés. Ces propriétés sont text-decoration-line, text-decoration-color et text-decoration-style. La propriété text-decoration-line applique les décorations de texte telles que le surlignage, le soulignement et le passage au trait. La propriété text-decoration-color est responsable de la définition de la couleur de la décoration du texte, et le text-decoration-style applique différents styles comme solide, ondulé, pointillé, en pointillés à la décoration de texte. Lorsque nous utilisons la propriété abrégée text-decoration, nous pouvons spécifier la valeur comme none. En conséquence, nous pouvons définir les trois propriétés sur none. Par conséquent, il supprimera le soulignement dans le lien hypertexte et supprimera également la couleur bleue.

Par exemple, créez un div avec la classe container. Ensuite, à l’intérieur du div, créez un span avec la classe thisPage. Ensuite, entre la balise span, écrivez le texte Current Page. Écrivez une balise anchor dans la ligne suivante. Définissez l’attribut href de la balise sur #. A l’intérieur de la balise anchor, écrivez un autre span avec la classe otherPage. Écrivez le texte Next Page entre le span. Ensuite, dans le fichier CSS correspondant, sélectionnez l’ancre, balise qui se trouve à l’intérieur de la classe container en tant que .container a. Définissez la couleur rouge du texte à l’aide du code hexadécimal #FF0000. Ensuite, définissez la propriété text-decoration sur none.

Le CSS ci-dessous mettra le texte Next Page en rouge, ce qui est un lien hypertexte. La propriété text-decoration, qui est définie sur none, supprimera le soulignement et la couleur bleue de l’élément de la balise anchor.

Exemple de code :

<div class="container">
    <span class="thisPage">Current Page</span>
    <a href="#"><span class="otherPage">Next Page</span></a>
</div>

.container a {
  color: #FF0000;
  text-decoration: none;
}

Utilisez des pseudo-classes pour la sélection afin de supprimer le soulignement bleu d’un lien en CSS

Nous sélectionnerons les pseudo-classes et appliquerons les mêmes propriétés CSS que la première méthode pour supprimer le soulignement bleu d’un lien. Auparavant, nous sélectionnions uniquement la balise anchor. Dans cette méthode, nous utiliserons des pseudo-classes pour sélectionner les balises d’ancrage. Nous utiliserons des pseudo-classes comme :hover, :visited, :link et :active. La classe :hover s’applique lorsque l’utilisateur pointe l’élément avec un périphérique de pointage tel qu’une souris mais ne clique pas nécessairement sur l’élément. La classe :visited s’applique lorsque le lien est déjà cliqué. De même, la classe :link sélectionne tous les liens non visités. Et, la classe :active sélectionne le lien actif. Nous utiliserons le même document HTML pour la démonstration de cette méthode.

Par exemple, utilisez les pseudo-classes :link, :visited, :hover et :active en sélectionnant la balise anchor. Séparez chaque pseudo-classe par une virgule. Définissez la propriété text-decoration sur none et définissez la propriété color sur #000000.

Les propriétés CSS appliquées entreront en vigueur pour toutes les pseudo-classes de l’exemple ci-dessous. Le sélecteur a:link changera la couleur du lien hypertexte en noir et supprimera le soulignement lorsque le lien n’est pas visité. Il remplace la propriété color parmi tous les autres sélecteurs. Le sélecteur a:visited supprimera le soulignement du lien après que le lien a été visité. Les effets CSS auront également lieu lorsque nous survolerons le lien et au moment de cliquer sur le lien. De cette façon, nous pouvons supprimer le soulignement et la couleur bleue du lien en utilisant les pseudo-classes CSS.

Exemple de code :

<span class="thisPage">Current Page</span>
<a href="#"><span class="otherPage">Next Page</span></a>

a:link, a:visited,  a:hover, a:active
{
    color: #000000;
    text-decoration: none;
}

Supprimer la propriété box-shadow pour supprimer le soulignement et la couleur d’un lien en CSS

Parfois, le soulignement peut être stylisé en utilisant la propriété box-shadow. Nous pouvons fournir l’effet de soulignement à n’importe quel texte en utilisant la propriété. L’extrait de code CSS suivant crée un soulignement.

box-shadow: inset 0 -3px 0 0 #bdb;

Dans un tel cas, si nous voulons supprimer le soulignement, nous pouvons supprimer la propriété box-shadow, ou nous pouvons définir la valeur de la propriété sur none.

Dans l’exemple ci-dessous, une classe span est stylisée en vert et la propriété box-shadow est utilisée pour créer un soulignement de couleur rouge. Ensuite, la valeur de la propriété est définie sur none, ce qui supprime l’effet de soulignement du texte.

Exemple de code :

<span class="thisPage">Current Page</span>

.thisPage {
  color: green;
  box-shadow: inset 0 -3px 0 0 red;
  box-shadow: none;
}