.nav-link{
font-size: 1.5rem;
color: rgb(26, 26, 26);
text-decoration: none;
position: relative;
}
.nav-link::after{
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 3px;
background: hsl(331, 100%, 50%);
transform: scaleX(0);
transform-origin: right;
transition: transform 250ms ease-in;
}
.nav-link:hover::after{
transform: scaleX(1);
transform-origin: left;
}
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter