JSFiddle - React, Tailwind, and code Playground

HTML

<a href="http://bouzuya.net">bouzuya.net</a>

CSS

/* reset default css */
a { text-decoration: none; }

a {
  display: inline-block;
}

a::after {
  content: "";
  display: block;
  width: 0;
  transition: width 0.3s;
  /* border or (height & background) etc. */
  border-bottom: 1px solid #f00;
  /* margin: 0 auto; */ /* left to right -> middle out */
}

a:hover::after {
  width: 100%;
}