CSS Hover effect doesn't work when implemented [duplicate] - css

Question

This question already has answers here:
Why do the :before and :after pseudo-elements require a 'content' property?
(5 answers)
Align inline-block DIVs to top of container element
(5 answers)
Closed 2 years ago.
i have troubleshooting with hover effects.
I'm working on a welcome webpage.
First i made an item list with HOVER effects :
body {
background-color: #E0105F;
}
.welcome-menu-box{
position: absolute;
right: 10%;
bottom: 10%;
}
.welcome-menu {
display: inline-flex;
justify-content: center;
align-items: center;
position: relative;
margin: 10px 10px;
width: 80px;
height: 80px;
background: #0D1033;
border-radius: 100px;
font-family: 'Montserrat', sans-serif;
color: #fff;
text-align: center;
font-size: 10px;
font-weight: lighter;
letter-spacing: 2px;
transition: 1s box-shadow;
}
.welcome-menu:hover {
box-shadow: 0 5px 35px 0px rgba(0,0,0,.1);
}
.welcome-menu:hover::before, .welcome-menu:hover::after {
content: '';
position: absolute;
width: 80px;
height: 80px;
background: #10E091;
border-radius: 100px;
z-index: -1;
animation: 1s clockwise infinite;
}
.welcome-menu:hover:after {
background: #EADCB5;
animation: 2s counterclockwise infinite;
}
#keyframes clockwise {
0% {
top: -5px;
left: 0;
}
12% {
top: -2px;
left: 2px;
}
25% {
top: 0;
left: 5px;
}
37% {
top: 2px;
left: 2px;
}
50% {
top: 5px;
left: 0;
}
62% {
top: 2px;
left: -2px;
}
75% {
top: 0;
left: -5px;
}
87% {
top: -2px;
left: -2px;
}
100% {
top: -5px;
left: 0;
}
}
#keyframes counterclockwise {
0% {
top: -5px;
right: 0;
}
12% {
top: -2px;
right: 2px;
}
25% {
top: 0;
right: 5px;
}
37% {
top: 2px;
right: 2px;
}
50% {
top: 5px;
right: 0;
}
62% {
top: 2px;
right: -2px;
}
75% {
top: 0;
right: -5px;
}
87% {
top: -2px;
right: -2px;
}
100% {
top: -5px;
right: 0;
}
}
<container class="welcome-menu-box">
<div class="welcome-menu">ABC</div>
<div class="welcome-menu">ABCD ABCDEF</div>
<div class="welcome-menu">ABCDEFGHIJ</div>
<div class="welcome-menu">ABCDEFGHI</div>
</container>
And I tried to implement it in a specific DIV on a webpage :
/* Div responsive encadrée pleine page avec arrière plan couleur + image png centrée et répétée depuis le centre */
.welcome-menu-box{
position: absolute;
right: 10%;
bottom: 10%;
vertical-align: middle;
}
.welcome-menu {
display: inline-flex;
justify-content: center;
text-align: center;
align-items: center;
position: relative;
margin: 10px 10px;
width: 80px;
height: 80px;
background: #0D1033;
border-radius: 100px;
font-family: 'Montserrat', sans-serif;
color: #fff;
font-size: 10px;
font-weight: lighter;
letter-spacing: 1px;
transition: 1s box-shadow;
}
.welcome-menu:hover {
box-shadow: 0 5px 35px 0px rgba(0,0,0,.1);
}
.welcome-menu:hover::before, .welcome-menu:hover::after {
position: absolute;
width: 75px;
height: 75px;
background: #10E091;
border-radius: 100px;
z-index: -1;
animation: 1s clockwise infinite;
}
.welcome-menu:hover:after {
background: #EADCB5;
animation: 2s counterclockwise infinite;
z-index: -1;
}
#keyframes clockwise {
0% {
top: -5px;
left: 0;
}
12% {
top: -2px;
left: 2px;
}
25% {
top: 0;
left: 5px;
}
37% {
top: 2px;
left: 2px;
}
50% {
top: 5px;
left: 0;
}
62% {
top: 2px;
left: -2px;
}
75% {
top: 0;
left: -5px;
}
87% {
top: -2px;
left: -2px;
}
100% {
top: -5px;
left: 0;
}
}
#keyframes counterclockwise {
0% {
top: -5px;
right: 0;
}
12% {
top: -2px;
right: 2px;
}
25% {
top: 0;
right: 5px;
}
37% {
top: 2px;
right: 2px;
}
50% {
top: 5px;
right: 0;
}
62% {
top: 2px;
right: -2px;
}
75% {
top: 0;
right: -5px;
}
87% {
top: -2px;
right: -2px;
}
100% {
top: -5px;
right: 0;
}
}
.encadrement {
background: url('https://www.agence-mibe.com/CODEPEN/GROSMYO-fullresponsive.png') repeat center center fixed, #E0105F;
position: absolute;
top: 0;
left: 0;
border: 75px solid #fff;
width: 100%;
height: 100%;
box-sizing: border-box;
background-size: auto 70%;
}
#media screen and (max-width: 1200px) {
.encadrement {
border: 50px solid #fff;
}
#media screen and (max-width: 768px) {
.encadrement {
border: 25px solid #fff;
background-size: 70% auto;
}
<section class="encadrement">
<container class="welcome-menu-box">
<div class="welcome-menu">ABC</div>
<div class="welcome-menu">ABCD ABCDEFG</div>
<div class="welcome-menu">ABCDEFGHIJ</div>
<div class="welcome-menu">ABCDEFG</div>
</container>
</section>
I have two problems that I'm not able to solve :
• The second item which contains two world has a vertical misalignment due to the occupied space
• The hover effect doesn't work on the web page, but works when alone
If somebody could give me a hint it would be wonderful :-)