<ul class="menu-hover-fill flex flex-col items-start leading-none text-2xl uppercase space-y-4">
  <li><a href="#" data-text="home">home</a></li>
  <li><a href="#" data-text="archives">archives</a></li>
  <li><a href="#" data-text="tags">tags</a></li>
  <li><a href="#" data-text="categories">categories</a></li>
  <li><a href="#" data-text="about">about</a></li>
</ul>
body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: black;
}

:root {
  --grey-color: #7f8c8d;
}

ul {
  padding: 0;
  margin: 0;
  list-style-type: none;
}

a {
  text-decoration: none;
}

$menu-link-active-colors: var(--primary-color), var(--info-color),
  var(--success-color), var(--warning-color), var(--danger-color);

.menu-hover-fill {
  li {
    position: relative;

    &::before {
      position: absolute;
      content: "";
      top: 0;
      left: -1rem;
      width: 0.25rem;
      height: 100%;
      background: var(--menu-link-active-color);
      transition: 0.6s;
    }

    a {
      --menu-link-color: var(--grey-color);
      position: relative;
      background: linear-gradient(var(--menu-link-active-color) 0 100%) left / 0
        no-repeat;
      color: transparent;
      background-clip: text;
      -webkit-background-clip: text;
      transition: background-size 0.45s 0.04s;

      &::before {
        position: absolute;
        content: attr(data-text);
        z-index: -1;
        color: var(--menu-link-color);
      }
    }

    @for $i from 1 through length($menu-link-active-colors) {
      &:nth-child(#{$i}) {
        --menu-link-active-color: #{nth($menu-link-active-colors, $i)};
      }
    }

    &:hover {
      &::before {
        left: calc(100% + 1rem);
      }

      a {
        background-size: 100%;
      }
    }
  }
}
View Compiled

External CSS

  1. https://cdn.jsdelivr.net/npm/@alphardex/aqua.css@1.5.0/dist/aqua.min.css

External JavaScript

This Pen doesn't use any external JavaScript resources.