h1 { color: #666;display:inline-block; margin:0;text-transform:uppercase; } h1:after { display:block; content: ''; border-bottom: solid 3px #019fb6; transform: scaleX(0); transition: transform 250ms ease-in-out; } h1:hover:after { transform: scaleX(1); } h1.fromRight:after{ transform-origin:100% 50%; } h1.fromLeft:after{ transform-origin: 0% 50%; }
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