JSFiddle - React, Tailwind, and code Playground

HTML

<nav class="nav">
  <a href="#">home</a>
  <a href="#">about</a>
  <a href="#">support</a>
</nav>

CSS

.nav {
  margin: 50px;
}

.nav a {
  margin: 0 20px;
  
  position: relative;
  
  font-size: 20px;
  color: navy;
  text-transform: uppercase;
  text-decoration: none;
}

.nav a:after {
  display: block;
  
  width: 50%;
  height: 2px;
  
  position: absolute;
  left: 50%;
  bottom: -10px;
  
  content: "";
  background-color: navy;
  transform: translateX(-50%);
  transition: all 0.2s;
}

.nav a:hover {
  color: tomato;
}

.nav a:hover:after {
  width: 100%;
  
  left: 0;
  
  background-color: tomato;
  transform: none;
}