<p>
  <a class="anim-underline-fx" href="#0">How to create an underline fill effect in CSS</a>
</p>
/* -------------------------------- 

šŸ’” How to create an underline fill effect in CSS
šŸ”— https://codyhouse.co/nuggets/animated-underline-text-effect

-------------------------------- */

.anim-underline-fx {
  color: darkblue;
  text-decoration: none;
  background-image: linear-gradient(to right, darkblue 50%, lightsteelblue 50%);
  background-size: 200% 3px;
  background-repeat: no-repeat;
  background-position: 100% 100%;
  transition: background-position .3s;
}

.anim-underline-fx:hover {
  background-position: 0% 100%;
}

/* demo stuff */
body {
  display: flex;
  height: 100vh;
  justify-content: center;
  align-items: center;
  padding: 1rem;
}

p {
  max-width: 480px;
  margin: 0px auto;
  font-size: 2rem;
}

External CSS

  1. https://codepen.io/codyhouse/pen/PoaqJWp.css

External JavaScript

This Pen doesn't use any external JavaScript resources.