JSFiddle - React, Tailwind, and code Playground

by joshmoto

HTML

<div class="menu">
  Menu
</div>

SCSS

.menu {
  display: inline-block;
  position: relative;
  font-family: sans-serif;
  font-size: 32px;
  font-weight: bold;
  overflow: hidden;
  cursor: pointer;
    
  &:after,
  &:before {
    content: "";
    position: absolute;
    bottom: 0;
    display: block;
    height: 4px;

  }

  &:before {
    background: grey;
    left: -80px; right: 0;
    transition: left .6s ease;
    border-left: 80px white solid;

  }
  
  &:after {
    background: blue;
    left: 0; right: calc(100% + 80px);
    transition: right .6s ease;
    
  }
  
  &:hover {
    
    &:before {
      left: calc(100% + 80px);
      
    }
    
    &:after {
      right: -80px;
      
    }
    
  }
    
}