CSS pulsating button effect with pseudo-elements - css

Question

I am confused with these button animation codes. These codes produce a pulsating effect button, but I am having difficult time interpret how they work together or what is under the hood.
<div >
btn
</div>
style.css:
.btn:link,
.btn:visited {
position: relative;
border-radius: 10rem;
display: inline-block;
margin-top: 6rem;
text-transform: uppercase;
text-decoration: none;
padding: 1.5rem 4rem;
transition: all 1.2s;
}
.btn:hover {
transform: translateY(-.3rem);
box-shadow: 0 1rem 2rem rgba(0, 0, 0, .3);
}
.btn:active {
transform: translateY(-.1rem);
box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .2);
}
.btn--white {
background-color: #fff;
color: #777;
}
.btn--white::after {
background-color: #fff;
}
.btn::after {
content: "";
display: inline-block;
height: 100%;
width: 100%;
border-radius: 10rem;
position: absolute;
top: 0;
left: 0;
z-index: -1;
transition: all .2s;
}
.btn:hover::after {
transform: scaleX(1.4) scaleY(1.6);
opacity: 0;
}
My main confusions are:
-- How do I read ::before/after use plain English, with .btn::after? Can I read it as: after running .btn code, run these code here? or with .btn--white::after { background-color: #fff;} I can read: after .btn--white executed, paint background white?
-- with .btn::after we created empty btn box right behind the original link button, when we use .btn:hover::after isn't the mouse pointer suppose to hover on the original button link instead of the empty button because of Z-index?
-- How does pulsating effect was rendered here? how does the .btn--white::after get called for constantly repainting the empty button?