JSFiddle - React, Tailwind, and code Playground

HTML

<div id="links">
 <hover><a href="https://www.google.de" target="_blank">Test Hyperlink</a></hover>
</div>

CSS

hover {
	text-decoration: none;
	position: relative;
	color: #5a768a;
  font-size:30px;
}

hover:after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 0%;
	border-bottom: 2px solid red;
	transition: 2.4s;
	color: #5a768a;
  text-decoration: none;
}

hover:hover:after {
	width: 100%;
	color: #5a768a;
  text-decoration: none;
}