JSFiddle - React, Tailwind, and code Playground

Animating Links CSS v001 thanks to cssanimation.rocks/animating-links

by dledle2

HTML

<article class="content">
  <p>... and here is some text. This text shows how <a href="https://cssanimation.rocks/#">CSS animation</a> can help us make links be more fun and useful...</p>
</article>

CSS

/* Styles for the title tooltips */
p {
  font-size: 2em;
  max-width: 80%;
}

a {
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-position: 0% 100%;
  background-repeat: no-repeat;
  background-size: 0% 4px;
  transition: background-size cubic-bezier(0,.5,0,1) 0.3s;
}

a:hover,
a:focus {
  text-decoration: none;
  background-size: 100% 4px;
}