Comment styliser les liens sans souligner un élément Span spécifique ?

Styliser des liens sans souligner un élément spécifique

Lorsque vous essayez de styliser des liens avec un soulignement, il est courant de rencontrer des situations dans lesquelles vous souhaiterez peut-être exclure un élément particulier dans le lien d'être souligné. Dans ce cas, vous avez rencontré un défi en appliquant des styles spécifiques à l'élément #myspan sans affecter le soulignement sur le reste du lien.

Pour résoudre ce problème, envisagez la solution suivante :

Modifiez la déclaration CSS de l'élément #myspan et définissez sa propriété d'affichage sur "inline-block". Ce changement fait effectivement que #myspan occupe son propre espace dans le lien, le séparant du texte souligné.

Voici le CSS mis à jour :

a {
  text-decoration: underline;
}

a #myspan {
  color: black;
  display: inline-block;
}

a:active #myspan {
  color: grey;
}

a:visited #myspan {
  color: yellow;
}

a:hover #myspan {
  color: red;
}

Vous pouvez également vous référer au code HTML suivant :

<a href="#">A link <span>

En effectuant ces modifications, l'élément #myspan ne sera plus affecté par le soulignement appliqué au lien, vous permettant de stylisez-le indépendamment sans compromettre l’apparence générale du lien.

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!