How to fix hover::after and transition within doesn't work? - css

Question

I'm trying to add a cool effect on a button using ::after and transition. But,
it doesn't work as i expected.
I did the following change in scss:
.btn{
&:link,
&:visited{
text-transform: uppercase;
text-decoration: none;
padding: 1.5rem 4rem;
display: inline-block;
border-radius: 10rem;
transition: all .2s;
position: relative;
font-size: 1.6rem;
}
&:hover{
transform: translateY(-3px);
box-shadow: 0 1rem 2rem rgba($color-black,.2);
&::after{
transform: scaleX(1.4) scaleY(1.6);
opacity: 0;
} }
&::after{
content: "";
display: inline-block;
height: 100%;
width: 100%;
border-radius: 10rem;
position: absolute;
top: 0;
left: 0;
z-index: -1;
transition: all .4s;
}
}
&hover is working as i expected and it gives the proper effect. But,
hover::after isn't working and I can't see my cool effect.Why is this?

Answer 1

I assume this is the effect you are trying to achieve. You need to add a background color to &::after
.btn, .btn:link, .btn:visited {
text-transform: uppercase;
text-decoration: none;
padding: 1.5rem 4rem;
display: inline-block;
border-radius: 10rem;
transition: all .2s;
position: relative;
font-size: 1.6rem;
}
.btn:hover{
transform: translateY(-3px);
box-shadow: 0 1rem 2rem rgba($color-black,.2);
}
.btn:hover:after{
transform: scaleX(1.4) scaleY(1.6);
opacity: 0;
}
.btn:after{
content: "";
display: inline-block;
background-color: red;
height: 100%;
width: 100%;
border-radius: 10rem;
position: absolute;
top: 0;
left: 0;
z-index: -1;
transition: all .4s;
}
<a class="btn">Button</a>