JSFiddle - React, Tailwind, and code Playground

by Ashish Kasama

HTML

<a class="menu-item"> Ashish</a> <a  class="menu-item"> Kasma</a>

SCSS

.menu-item{
  display:inline-block;
  cursor:pointer;
  position:relative;
  &:after{
    content: " ";
    height:1px;
    position:absolute;
    background:black;
    width:0%;
    right:0px;
    bottom:0px;
    transition: width 0.5s
  }
  &:hover{
    &:after{
      content: " ";
      width:100%;
      left:0px;
      right:initial;
    }
  }
}