How to aimate the before and after pseudo elements?

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>