CSS Animation Not Triggering on Hover for Pseudo-Elements in Firefox
I'm trying to configure I'm maintaining legacy code that I'm having a hard time understanding I've searched everywhere and can't find a clear answer. I'm experiencing an scenario where a CSS animation does not trigger as expected on a pseudo-element when hovering over its parent element in Firefox. I have the following CSS for a button that uses `::after` to create a glow effect: ```css .button { position: relative; padding: 10px 20px; background-color: #3498db; color: white; border: none; cursor: pointer; } .button::after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(255, 255, 255, 0.2); opacity: 0; transition: opacity 0.3s ease; border-radius: 4px; } .button:hover::after { opacity: 1; animation: glow 1s infinite alternate; } @keyframes glow { 0% { transform: scale(1); } 100% { transform: scale(1.1); } } ``` On Chrome and Edge, the effect works beautifully when I hover over the button. However, in Firefox, the animation does not seem to trigger at all, and the glow effect only appears when I hover directly over the `::after` element itself. I've verified that my Firefox version is up to date (112.0). I've also tried adding `pointer-events: none;` to the `::after` pseudo-element to see if that helps, but it didn't resolve the scenario. Is there any known workaround for this question in Firefox, or do I need to approach this differently? Any insights would be appreciated! I'd really appreciate any guidance on this. I recently upgraded to Css 3.11. Could someone point me to the right documentation? Thanks for your help in advance! Any examples would be super helpful. What's the best practice here?