JSFiddle - React, Tailwind, and code Playground

HTML

<div class="menu">
  <a href="">home</a>
  <a href="">bad home</a>
  <a href="">friend home</a>
  <a href="">home of wHorses</a>
  <a href="">contact</a>
</div>

SASS

.menu
  padding: 0 20px
  height: 100px
  margin: 20px auto
  display: flex
  align-items: center
  a
    position: relative
    color: #333
    text-transform: uppercase
    text-decoration: none
    white-space: nowrap
    margin-left: 25px
    overflow: hidden
    &:hover
      color: darken(orange, 5%)
      &::before
        left: 0
      &::after
        right: 0
    &::before,
    &::after
      content: ''
      position: absolute
      width: 50%
      height: 1px
      bottom: 0
      transition: .12s ease-out
      transition-property: left, right
    &::before
      background-color: red
      left: -50%
    &::after
      background-color: lighten(orange, 10%)
      right: -50%