Appliquer un effet au survol des liens

Comment créer une petite animation sur le surlignement des liens ?

De plus en plus de sites utilisent cette technique de surlignement des liens, parfois débordant sur le mot lui même. Au survol, le surlignage recouvre tout ou partie du lien.

Voici quelques exemples de surlignement et d’effets au survol : On utilise ici les propriétés css background-image, linear-gradient et transition. Pour le dernier, quelques propriétés peu utilisées et méconnues : text-decoration-color, text-decoration-thickness;

See the Pen
Highlight simple hover effet
by blindDev (@yuyazz)
on CodePen.