Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save krzysztofjeziorny/a22878de8dc675a4da1611a88305afa9 to your computer and use it in GitHub Desktop.
Save krzysztofjeziorny/a22878de8dc675a4da1611a88305afa9 to your computer and use it in GitHub Desktop.
// https://nickymeuleman.netlify.app/blog/css-animated-wrapping-underline
// https://codepen.io/jh3y/pen/gOPjBPM
:root {
--underline-width: 5px;
--underline-block-width: 2rem;
--underline-color: hsla(7, 72%, 49%, 0.363);
--underline-color-hover: transparent;
--underline-transition-in: 0.75;
--underline-transition-out: 0.5;
--bg: hsl(0, 95%, 24%);
}
a {
text-decoration: none;
/* Two background images, the first is the moving block, the second the underline */
background-image: linear-gradient(90deg, var(--bg), var(--bg)),
linear-gradient(90deg, var(--underline-color), var(--underline-color));
background-repeat: no-repeat;
background-size: var(--underline-block-width) var(--underline-width),
100% var(--underline-width);
background-position: calc(var(--underline-block-width) * -1) 100%, 0 100%;
transition: background-position calc(var(--underline-transition-out) * 1s)
ease,
background-image calc(var(--underline-transition-out) * 1s) ease;
&:hover {
background-image: linear-gradient(90deg, var(--bg), var(--bg)),
linear-gradient(
90deg,
var(--underline-color-hover),
var(--underline-color-hover)
);
background-position: calc(100% + var(--underline-block-width)) 100%,
0 100%;
transition: background-position
calc(var(--underline-transition-in) * 1s) ease,
background-image calc(var(--underline-transition-in) * 1s) ease;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment