Lien/animation pour lien

Bonjour,

Je voudrais créer une table (comme sur Awesome Table) avec mes données et mon template sur Google Sheets. J'aimerais faire une animation/transition sur le soulignement de mes liens lorsque la souris passe dessus. J'ai essayé de suivre ce tutoriel: https://cssanimation.rocks/animating-links/
mais cela ne fonctionne pas du tout.

voila mon html:

<span class="link-icon-wrapper"><img src="https://image.flaticon.com/icons/png/512/60/60758.png" width="17" height="17"/><a href="{{Link}}" target="_blank" onclick="ga('send', 'event', '{{Chapter}}', '{{Title}}', '{{Language}}')" style="color:#000000;"><span class="hse">{{Title}}<img src="https://sites.google.com"/></p>
</a><span>

et voilà mon CSS:

/*** Content CSS ***/

.link-icon-wrapper {
    whitse space: no-wrap;
}

a {
  text-decoration: none;
}

a:hover {
  text-decoration: none;
}

a {
  text-decoration: none;
  position: relative;
}

a:after {
  border-radius: 1em;
  border-top: .1em solid #2F56B0;
  content: "";
  position: absolute;
    right: 100%;
    bottom: .14em;
    left: 0;
  transition: right .4s cubic-bezier(0,.5,0,1);
}

a:hover:after {
  right: 0; 

Pourriez-vous m'aider?

Merci d'avance,
Cordialement,
R.