Back to library
INTERACTION_027
Navigation Underline.
A pseudo-element scales on X from right origin to zero and back in from the left, so the rule wipes rather than fades.
- CATEGORY
- Navigation
- COMPLEXITY
- Easy
- TECH
- CSS
- PLATFORM
- Both
- PERFORMANCE
- Light
LIVE PLAYGROUND
DISCOVEREFFECTSPROMPTS
CSS / CSS
.nav-link { position: relative; }
.nav-link::after {
content: "";
position: absolute;
left: 0; bottom: -4px;
width: 100%; height: 1px;
background: currentColor;
transform: scaleX(0);
transform-origin: right;
transition: transform 350ms cubic-bezier(0.22, 1, 0.36, 1);
}
.nav-link:hover::after { transform: scaleX(1); transform-origin: left; }