JSFiddle - React, Tailwind, and code Playground

HTML

<a class="imagereveal" href="#" rel="image goes here">
   <div class="nav-underline"><h1>Test</h1></div>
   <h2>Description</h2>
   <h3>Detail</h3>
</a>

CSS

.nav-underline {
  position: relative;
  display: inline-block;
  cursor: pointer;
}

.nav-underline:before, .nav-underline:after {
  content: '';
  position: absolute;
  width: 0%;
  height: 3px;
  top: 45%;
  margin-top: -0.5px;
  background: #000;

}

.nav-underline:hover {
    letter-spacing: 4px;
    transition: .35s;
}
.nav-underline:before {
  left: -2.5px;
}
.nav-underline:after {
  right: 2.5px;
  background: #000;
  transition: width 0.8s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.nav-underline:hover:before {
  background: #000;
  width: 100%;
  transition: width 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.nav-underline:hover:after {
  background: transparent;
  width: 100%;
  transition: 0s;

}