JSFiddle - React, Tailwind, and code Playground

HTML

<p>
ein text, hier der <a href="#">Link</a>.
</p>

CSS

p a{
  color: black;
	text-decoration: none;
	// text-decoration-thickness: 0.2rem;
  position:relative;
}
p a::before{
  content:'';
  display:block;
  height:0.2rem;
  background:red;
  width:0;
  position:absolute;
  bottom:0;
  left: 50%;
  transform: translateX(-50%);
  transition:all ease 150ms;
  z-index:5;
}
p a:focus{
	color: black;
	text-decoration: none;
}
p a:hover, p a:active{
	color: black;
	text-decoration: none;
}
p a:focus::before,
p a:hover::before,
p a:active::before{
  width:100%;
}