suppression du soulignement CSS

Dans la conception Web, le soulignement est une ligne décorative couramment utilisée pour ajouter du style aux hyperliens. Cependant, dans certains cas, nous devrons peut-être supprimer le soulignement d’un lien hypertexte. En CSS, il existe plusieurs façons de créer un lien hypertexte sans souligner.

1. attribut text-decoration

En CSS, l'attribut text-decoration peut être utilisé pour contrôler les lignes décoratives du texte. En définissant text-decoration:none, le soulignement du lien hypertexte peut être supprimé.

Par exemple, le code suivant peut supprimer le soulignement de tous les hyperliens :

a {
  text-decoration: none;
}

2. attribut border-bottom

Une autre façon consiste à utiliser l'attribut border-bottom pour simuler le soulignement. Les soulignements peuvent être supprimés en définissant border-bottom:none.

Par exemple, le code suivant peut supprimer le soulignement de tous les hyperliens et ajouter une bordure inférieure de 1 pixel à l'aide de l'attribut border-bottom :

a {
  text-decoration: none;
  border-bottom: 1px solid #000;
}

3. attribut background-image

Nous pouvons également utiliser l'attribut background-image pour le supprimer Souligner. Le soulignement peut être supprimé en définissant l’image d’arrière-plan du lien hypertexte sur un pixel vide. Cette méthode peut également être utilisée pour ajouter un soulignement personnalisé.

Par exemple, le code suivant peut supprimer le soulignement de tous les hyperliens et définir le soulignement sur une ligne bleue de 1 pixel de haut :

a {
  text-decoration: none;
  background-image: url("data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=");
  background-repeat: repeat-x;
  background-position: bottom;
  background-color: blue;
  height: 1px;
}

4. :après le sélecteur

Enfin, nous pouvons également utiliser l'outil de sélection :après pour ajouter un soulignement. Cette méthode peut ajouter un pseudo-élément au lien hypertexte et ajouter un style à l'élément pour obtenir l'effet de soulignement.

Par exemple, le code suivant peut supprimer le soulignement de tous les hyperliens et ajouter un soulignement noir de 1 pixel de haut à l'aide du sélecteur :after :

a {
  text-decoration: none;
  position: relative;
}

a:after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background-color: black;
}

Pour résumer, en définissant text-decoration:none, border-bottom : Avec none, background-image et d'autres méthodes, nous pouvons supprimer le soulignement d'un lien hypertexte ou ajouter un soulignement personnalisé. L'utilisation du sélecteur :after nous permet de contrôler le style de soulignement de manière plus flexible. Dans les applications pratiques, nous pouvons choisir la méthode la plus appropriée pour supprimer les soulignements en fonction de la situation spécifique.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!