JSFiddle - React, Tailwind, and code Playground

HTML

<a href="#" data-hover="Fill Color On Text">Fill Color On Text</a>

CSS

body {
  font-size: 20px;
}
a {
  color: #000;
  text-decoration: none;
  position: relative;
  display: block;
  font-size:20px; 
}

a:after {
  content: attr(data-hover);
  position: absolute;
  color: #5da91e;
  text-decoration: underline;
  left: 0;
  width: 0;
  transition: 1s;
  overflow: hidden;
  white-space: nowrap;
}
a:hover:after {
  width: 100%;
  
}