CSS Animations` Effect on Pseudo-Element

Hello guys.... I am trying to make an animation where a button would bounce on a line. The button is the main element and the line it bounces on is the pseudo-element. I want the pseudo-element to be stable while the button bounces on it but it inherits the parent animation so its not working. This is the codepen link: https://codepen.io/SsadiqRoy/pen/JjwoNpP?editors=1100 Please the animation is on hover and translate-origin: 0% 50% so to test it, hover your mouse at this coordinates
When the button is not hovered
When the button is hoverd
7 Replies
Mannix
Mannix15mo ago
i would put the after on the parent 🙂 of that button
Ssadiq Roy
Ssadiq Roy15mo ago
The parent is the long box with the 1px border, I don't want the bottom line to be long. I want it to be just the with of the button. And I also want to find out if in css, you can prevent the pseudo element from following the parent element`s animation.
Ssadiq Roy
Ssadiq Roy15mo ago
@Mannix
Its working but I still can't grasp how it is working. You edited the ::after of the parent element with no absolute position, and you rather animated the after of the button (child element) on child element's hover. Please can you explain to me how this works? 🙏
Mannix
Mannix15mo ago
it works because you have display: grid on the parent. normally it would not
Ssadiq Roy
Ssadiq Roy15mo ago
Oh Woww! That's it. I took the grid out and it didn't. Thank Very much. But without the display grid is there any way you could make that action (an element bouncing on a line, probably it's pseudo element). That would be very helpful too.
Mannix
Mannix15mo ago
you would probably need to counter the original animation but i'm not sure
Want results from more Discord servers?
Add your server