Générateur de soulignement animé pour liens (CSS)

Générateur de soulignement animé pour liens (CSS): à quoi ça sert

Un soulignement qui s’anime au survol donne une finition aux liens des menus et des textes. Réalisé avec ::after, il ne fonctionne que sur les liens d’une seule ligne ; ce générateur dessine la ligne avec background-image et anime background-size, ce qui fonctionne même quand le lien passe à la ligne.

Choisissez parmi cinq effets (grandit depuis la gauche, depuis le centre, glisse, surligneur et ondulé), la couleur, l’épaisseur et la durée. Une fine ligne reste toujours visible par défaut, pour que le lien se distingue du texte comme l’exige la WCAG 1.4.1, et l’effet apparaît aussi au focus clavier.

Mode d’emploi

1. Choisissez l’effet.
2. Réglez la couleur, l’épaisseur et la durée.
3. Copiez le CSS et appliquez la classe aux liens.

Quand l’utiliser

• Menus de navigation.
• Liens dans les articles.
• Pieds de page et listes de liens.

Questions fréquentes

Pourquoi utiliser background et pas un ::after ?

Avec un pseudo-élément ::after, la ligne ne fonctionne que sur les liens d’une seule ligne. En dessinant le soulignement avec background-image et en animant background-size, la ligne suit le texte même quand le lien passe sur deux lignes.

Le lien ressemble-t-il toujours à un lien ?

Au milieu d’un paragraphe, le lien doit se distinguer du texte même sans survol (WCAG 1.4.1). C’est pourquoi l’option de garder une fine ligne toujours visible est cochée ; l’effet s’anime par-dessus.

Et sur mobile ?

Sur mobile, il n’y a pas de survol ; l’effet apparaît au focus et au toucher. La ligne de base visible garantit que les liens sont reconnus.

Vraiment gratuit ?

Oui, 100 % gratuit. Sans inscription, sans abonnement et sans limite d’utilisation. Tous les outils de Tools123 sont gratuits.

Outils similaires