JSFiddle - React, Tailwind, and code Playground

by silb3r

HTML

<a href="#">nav item<span class="hover"></span></a>

SCSS

a {
  position: relative;
  display: inline-block;
  text-decoration: none;
  color: #000;
  > .hover {
    display: block;
    height: 1px;
    width: 100%;
    background: transparent;
    position: relative;
    overflow: hidden;
    &:before, &:after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      height: 1px;
      width: 50%;
      transform: translate3d(-100%,0,0);
      transition: all 0.3s ease-in-out;
      background: #000;
    }
    &:after {
      left: auto;
      right: 0;
      transform: translate3d(100%,0,0);
    }
  }
  &:hover > .hover {
    &:before, &:after {
      transform: translate3d(0,0,0);
    }
  }
}