Skip to content

Instantly share code, notes, and snippets.

@GGrassiant
Created September 29, 2020 17:13
Show Gist options
  • Select an option

  • Save GGrassiant/0b5487e4b3b749ab8094b120987bdd56 to your computer and use it in GitHub Desktop.

Select an option

Save GGrassiant/0b5487e4b3b749ab8094b120987bdd56 to your computer and use it in GitHub Desktop.
CSS Animated Underline
.bt-wrapper{
position: relative;
margin-bottom: 15px;
margin-top: 15px;
text-align: center;
&:hover {
cursor: pointer;
}
&:hover > a::after {
width: 70%;
left: 15%;
transition: 0.5s ease all;
}
> a {
font-size: 8px;
font-weight: 600;
line-height: 14px;
letter-spacing: 1.33px;
color: rgba(0, 0, 0, 0.5);
&:hover {
text-decoration: none;
}
&:after {
content: "";
position: absolute;
top: 100%;
height: 1px !important;
width: 30%;
left: 35%;
background-color: #D8D8D8;
transition: 0.4s ease-out all .1s;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment