<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 {
  /* reset */
  color: darkblue;
  text-decoration: none;

  /* filling effect */
  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;
}
View Compiled

External CSS

  1. https://unpkg.com/codyhouse-framework/main/assets/css/style.css
  2. https://codepen.io/codyhouse/pen/oNxLjqp

External JavaScript

This Pen doesn't use any external JavaScript resources.