body { background-color: #2b0; font-size: 3rem; 4 } div { width: 0px; } a { color: #dfe5f3; text-decoration: none; background-image: linear-gradient(#222b40, #222b40), linear-gradient(rgb(6, 251, 8), rgb(176, 251, 188)), linear-gradient(#feb2b2, #feb2b2); background-size: 20px 2px, 100% 2px, 0 2px; background-position: calc(20px * -1) 100%, 100% 100%, 0 100%; 17 background-repeat: no-repeat; 18 transition: background-size 2s linear, background-position 2s linear; } 20 a:hover { 22 background-size: 20px 2px, 0 2px, 100% 2px; // VISCOR .hover-underline-animation span { text-decoration: none; background-image: linear-gradient(rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.9)), linear-gradient(rgba(176, 251, 188, 0), rgba(51, 30, 167, 0)), linear-gradient(rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.9)); background-size: 20px 2px, 100% 2px, 0 2px; background-position: calc(20px * -1) 100%, 100% 100%, 0 100%; background-repeat: no-repeat; transition: background-size 1s linear, background-position 1s linear; } .hover-underline-animation span:hover { background-size: 20px 2px, 0 2px, 100% 2px; background-position: calc(100% + 20px) 100%, 100% 100%, 0 100%; }
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