JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
  <li><a href="#">Home</a></li>
  <li><a href="#">About</a></li>
  <li><a href="#">Support</a></li>
  <li class="searchbtn"><a  href="#">Search</a></li>
</ul>

CSS

li > a {
  position: relative;
  text-decoration: none;
}

li > a::after {
  content: '';
  position: absolute;
  background-color: black;
  height: 1px;
  width: 0px;
  left: 0;
  bottom: 0;
  transition: width 0.2s;
}

li > a:hover::after {
  width: 100%;
}