Difference between .bttn:before and .bttn:hover:before [duplicate] - html

Question

This question already has answers here:
How can I write a ':hover' condition for 'a:before' and 'a:after'?
(7 answers)
Closed 4 years ago.
I used the following code snippet to get the effect on the Submit buttons in the form.
Codepen Link
HTML:
a.bttn-dark:hover {
color: #FFF;
}
a.bttn-dark:focus {
color: #FFF;
}
.bttn:before {
-webkit-transition: 0.5s all ease;
transition: 0.5s all ease;
position: absolute;
top: 0;
left: 50%;
right: 50%;
bottom: 0;
opacity: 0;
content: '';
background-color: #FF0072;
z-index: -2;
}
.bttn:hover:before {
-webkit-transition: 0.5s all ease;
transition: 0.5s all ease;
left: 0;
right: 0;
opacity: 1;
}
<div class="flex">
Continue
</div>
<div class="flex dark">
Continue
</div>
I am confused about the usage of following,
what would be different if a:hover is only used instead of a.bttm-dark:hover ?
bttn:before and bttn:hover:before
why is the pseudo element bttn:hover appearing in the HTML document after bttn element? Shouldn't it come before?

Answer 1

Follow below css code.
CSS:
a.bttn {
color: #FF0072;
text-decoration: none;
}
a.bttn-dark {
color: #644cad;
text-decoration: none;
}
a.bttn:hover {
color: #FFF;
}
a.bttn-dark:hover {
color: #FFF;
}
a.bttn-dark:focus {
color: #FFF;
}
.bttn {
font-size:18px;
letter-spacing:2px;
text-transform:uppercase;
display:inline-block;
text-align:center;
width:270px;
font-weight:bold;
padding:14px 0px;
border:3px solid #FF0072;
border-radius:2px;
position:relative;
box-shadow: 0 2px 10px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.1);
}
.bttn:before {
-webkit-transition:0.5s all ease;
transition:0.5s all ease;
position:absolute;
top:0;
left:50%;
right:50%;
bottom:0;
opacity:0;
content:'';
background-color:#FF0072;
z-index:-2;
}
.bttn:hover {
-webkit-transition:0.5s all ease;
transition:0.5s all ease;
left:0;
right:0;
opacity:1;
}
.bttn:focus {
transition:0.5s all ease;
left:0;
right:0;
opacity:1;
}
.bttn:hover:before {
-webkit-transition: 0.5s all ease;
transition: 0.5s all ease;
left: 0;
right: 0;
opacity: 1;
}
.bttn-dark {
font-size:18px;
letter-spacing:2px;
text-transform:uppercase;
display:inline-block;
text-align:center;
width:270px;
font-weight:bold;
padding:14px 0px;
border:3px solid #644cad;
border-radius:2px;
position:relative;
box-shadow: 0 2px 10px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.1);
}
.bttn-dark:before {
-webkit-transition:0.5s all ease;
transition:0.5s all ease;
position:absolute;
top:0;
left:50%;
right:50%;
bottom:0;
opacity:0;
content:'';
background-color:#644cad;
z-index:-2;
}
.bttn-dark:hover {
-webkit-transition:0.5s all ease;
transition:0.5s all ease;
left:0;
right:0;
opacity:1;
}
.bttn-dark:focus {
transition:0.5s all ease;
left:0;
right:0;
opacity:1;
}
.bttn-dark:hover:before {
-webkit-transition: 0.5s all ease;
transition: 0.5s all ease;
left: 0;
right: 0;
opacity: 1;
}