How to aimate the before and after pseudo elements? - html

Question

I want to make like this shape using HTML and CSS:
this is my code but why the before and after elements don't stop rotation when I hover on it:
Code:
body {
height: 100vh;
padding: 0;
margin: 0;
position: relative;
}
#keyframes rotate {
from {
transform: scale(1) rotate(0deg);
}
to {
transform: scale(1) rotate(360deg);
}
}
div {
background-color: #eee;
width: 50px;
height: 50px;
display: flex;
justify-content: center;
align-items: center;
color: #000000;
font-size: 30px;
font-weight: bold;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border: 10px solid;
border-color: transparent #ea2264 #ea2264 #ea2264;
border-radius: 50%;
animation-name: rotate;
animation-duration: 1s;
animation-delay: 1s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
div::before {
content: "";
position: absolute;
width: 75px;
height: 75px;
border: 10px solid;
border-color: #1790e1 #1790e1 transparent #1790e1;
border-radius: 50%;
animation-name: rotate;
animation-duration: 1s;
animation-delay: 1s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
div::after {
content: "";
position: absolute;
width: 100px;
height: 100px;
border: 10px solid;
border-color: #fca400 #fca400 #fca400 transparent;
border-radius: 50%;
animation-name: rotate;
animation-duration: 1s;
animation-delay: 1s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
div:hover {
animation-play-state: paused;
}
div::after:hover {
animation-play-state: paused;
}
div::before:hover {
animation-play-state: paused;
}
<div></div>
My question is how to animate and pause the rotation of two pseudo elements when I hover on it to make like the design in the picture?

Answer 1

Simply change your selectors from:
div:hover {
animation-play-state: paused;
}
div::after:hover {
animation-play-state: paused;
}
div::before:hover {
animation-play-state: paused;
}
to:
div:hover,
div:hover::after,
div:hover::before {
animation-play-state: paused;
}
your selectors indicate an over on the pseudo-elements. since you only hover the div itself you need to add the ::before/after selector after the :hover selector.
body {
height: 100vh;
padding: 0;
margin: 0;
position: relative;
}
#keyframes rotate {
from {
transform: scale(1) rotate(0deg);
}
to {
transform: scale(1) rotate(360deg);
}
}
div {
background-color: #eee;
width: 50px;
height: 50px;
display: flex;
justify-content: center;
align-items: center;
color: #000000;
font-size: 30px;
font-weight: bold;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border: 10px solid;
border-color: transparent #ea2264 #ea2264 #ea2264;
border-radius: 50%;
animation-name: rotate;
animation-duration: 1s;
animation-delay: 1s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
div::before {
content: "";
position: absolute;
width: 75px;
height: 75px;
border: 10px solid;
border-color: #1790e1 #1790e1 transparent #1790e1;
border-radius: 50%;
animation-name: rotate;
animation-duration: 1s;
animation-delay: 1s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
div::after {
content: "";
position: absolute;
width: 100px;
height: 100px;
border: 10px solid;
border-color: #fca400 #fca400 #fca400 transparent;
border-radius: 50%;
animation-name: rotate;
animation-duration: 1s;
animation-delay: 1s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
div:hover,
div:hover::after,
div:hover::before {
animation-play-state: paused;
}
<div></div>