Dans ce tutoriel je vous propose de découvrir comment réaliser un effet de soulignement animé en CSS.
Première approche : pseudo-élément
La première approche consiste à utiliser un pseudo élément et d'animer la propriété transform pour faire évoluer la valeur scaleX().
Ce qui donne le rendu que l'on cherche à obtenir.
En revanche cela ne permet pas de gérer le cas d'un texte multiligne vu que le pseudo élément va se placer par rapport à la boîte composée par la dernière ligne :
Approche via un background
Une autre solution consiste à utiliser la propriété background via un dégradé linéaire pour ne créer qu'une bordure. Il suffit ensuite d'animer le background-size pour créer l'effet de soulignement progressif.