JSFiddle - React, Tailwind, and code Playground

by wwt

HTML

<div id="test">
<a href="#">Ссылка</a>
</div>

CSS

#test a{
  color:black;
  text-decoration:none;
  padding-bottom: 10px;
  position: relative;
  display: inline-block;
}

#test a:hover{
  color: grey;
}

#test a::after {
  position: absolute;
  content: '';
  left: 0;
  bottom: 0;
  width: 50%;
  height: 0;
  background: red;
  border-bottom:thin solid black;
}

#test a:hover::after {
    border-bottom-color:grey;
}