<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
This Pen doesn't use any external JavaScript resources.