Comment modifier les soulignements des liens HTML sur une page Web

Cet article explique plusieurs façons d'utiliser CSS pour modifier l'apparence par défaut des liens de texte sur votre page Web en supprimant le soulignement, en le remplaçant par une ligne pointillée ou en changeant sa couleur. Des informations supplémentaires sont incluses pour changer le soulignement en ligne pointillée ou en double soulignement.

Comment supprimer le soulignement sur les liens de texte

Par défaut, les navigateurs Web ont certains Styles CSS qu'ils s'appliquent à des éléments HTML spécifiques. Si vous ne remplacez pas ces valeurs par défaut par les feuilles de style de votre site, les valeurs par défaut s'appliquent. Pour

hyperliens, le style d'affichage par défaut est que tout texte lié est bleu et souligné. Si vous le souhaitez, vous pouvez modifier l'apparence de ces soulignements ou les supprimer complètement de votre page Web.

Pour supprimer les soulignements des liens de texte, vous utilisez la propriété CSS text-decoration. Voici le CSS que vous écrivez pour ce faire:

a { texte-décoration: aucun; }

Avec cette seule ligne de CSS, vous supprimez le soulignement de tous les liens de texte sur votre page Web. Même s'il s'agit d'un style très général (il utilise un sélecteur d'élément), il a toujours plus de spécificité que les styles par défaut des navigateurs. Parce que ces styles par défaut sont ce qui crée les soulignements pour commencer, c'est ce que vous devez écraser.

Une mise en garde sur la suppression des soulignements

Visuellement, la suppression des soulignements peut être exactement ce que vous voulez accomplir, mais vous devez également être prudent lorsque vous le faites. Que vous aimiez ou non l'apparence des liens soulignés, vous ne pouvez pas prétendre qu'ils rendent évident le texte qui est lié et celui qui ne l'est pas. Si vous supprimez les soulignements ou modifiez cette couleur de lien bleu par défaut, vous devez vous assurer de les remplacer par des styles qui permettent toujours au texte lié de se démarquer. Cela rendra l'expérience plus intuitive pour les visiteurs de votre site.

Ne pas souligner les non-liens

Une autre mise en garde sur les liens et les soulignements, ne soulignez pas le texte qui n'est pas un lien afin de le souligner. Les gens s'attendent à ce que le texte souligné soit un lien, donc si vous soulignez le contenu afin d'ajouter emphase (au lieu de le mettre en gras ou en italique), vous envoyez le mauvais message et confondrez le site utilisateurs.

Comment changer le soulignement en points ou en tirets

Si vous souhaitez conserver les soulignements de vos liens de texte, mais modifier le style de ce soulignement par rapport à l'apparence par défaut, qui est une ligne "pleine", vous pouvez également le faire. Au lieu de cette ligne continue, vous pouvez utiliser des points pour souligner vos liens. Pour ce faire, vous supprimerez toujours le soulignement, mais vous le remplacerez par la propriété de style border-bottom:

a { texte-décoration: aucun; bordure en bas: 1px en pointillé; }

Puisque vous avez supprimé le soulignement standard, le pointillé est le seul qui apparaît.

Vous pouvez faire la même chose pour obtenir des tirets. Changez simplement le style de la bordure du bas en pointillé:

a { texte-décoration: aucun; bordure inférieure: 1px en pointillés; }

Comment changer la couleur de soulignement

Une autre façon d'attirer l'attention sur vos liens est de changer la couleur du soulignement. Assurez-vous simplement que la couleur correspond à votre Schéma de couleur.

a { texte-décoration: aucun; bordure inférieure: 1 pixel rouge uni; }

Soulignements doubles

L'astuce pour utiliser les doubles soulignements est que vous devez modifier la largeur de la bordure. Si vous créez une bordure de 1px de large, vous vous retrouverez avec un double soulignement qui ressemble à un simple soulignement.

a { texte-décoration: aucun; bordure en bas: 3px double; }

Vous pouvez également utiliser le soulignement existant pour faire un double soulignement avec d'autres éléments, comme l'une des lignes en pointillé:

a { border-bottom: 1px double; }

N'oubliez pas les états des liens

Vous pouvez ajouter le style border-bottom à vos liens à différents états tels que :hover, :active ou :visited. Cela peut créer une belle expérience de style "survol" pour les visiteurs lorsque vous utilisez cette pseudo-classe "survol". Pour faire apparaître un deuxième soulignement en pointillé lorsque vous survolez le lien:

a { texte-décoration: aucun; }
a: hover { border-bottom: 1px en pointillé; }