.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