Created
July 22, 2022 17:10
-
-
Save celeroncoder/2322b0cd5aa1bb0f584312d26c7ac589 to your computer and use it in GitHub Desktop.
Hover Underline Animation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
.hover-underline-animation { | |
display: inline-block; | |
position: relative; | |
} | |
.hover-underline-animation:after { | |
content: ''; | |
position: absolute; | |
width: 100%; | |
transform: scaleX(0); | |
height: 2px; | |
bottom: 0; | |
left: 0; | |
background-color: rgb(225 29 72 / 0.7); /* match with the text color */ | |
transform-origin: bottom right; | |
transition: transform 0.5s ease-out; /* change the transition duration as it fits */ | |
} | |
.hover-underline-animation:hover:after { | |
transform: scaleX(1); | |
transform-origin: bottom left; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment