JSFiddle - React, Tailwind, and code Playground

HTML

<a href="">TRIAL TEXT</a>

CSS

a {
  position: relative;
  padding: 5px;
  text-decoration: none;
  color: black;
}

a:after {
  content: "";
  position: absolute;
  bottom: 4px;
  right: 0;
  left: auto;
  width: 0%;
  height: 5px;
  background: red;
  transition-property: width;
  transition-duration: 0.9s;
}

a:hover:after {
  width: 100%;
  right: auto;
  left: 0;
}