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
7 Replies
i would put the after on the parent 🙂
of that button
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.
@Mannix
Its working but I still can't grasp how it is working. You edited the
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? 🙏it works because you have display: grid on the parent. normally it would not
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.
you would probably need to counter the original animation but i'm not sure