CSS Hover Effect Not Triggering on Pseudo-Elements in Firefox 120
I'm testing a new approach and I'm learning this framework and I've encountered a strange issue with Hey everyone, I'm running into an issue that's driving me crazy. I've been banging my head against this for hours. I'm trying to implement a hover effect on a button that utilizes a pseudo-element for a dynamic background animation. It works perfectly in Chrome and Safari, but in Firefox 120, the hover effect doesn't trigger correctly for the `::after` pseudo-element. I've defined my button like this: ```css .button { position: relative; display: inline-block; padding: 10px 20px; color: white; background-color: #007bff; border: none; cursor: pointer; } .button::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255, 255, 255, 0.2); transform: scale(0); transition: transform 0.3s ease; z-index: -1; } .button:hover::after { transform: scale(1); } ``` In Firefox, when I hover over the button, it seems like the `::after` element doesn't scale at all. I checked the computed styles and noticed that the `transform` property is not being applied as expected. I've tried adding `pointer-events: none;` to the `::after` element, but it didn't resolve the scenario. I also verified that the CSS is being loaded correctly and there are no conflicting styles. Is there something specific about how Firefox handles pseudo-elements on hover that I might be missing? Any suggestions on how to get this to work would be greatly appreciated! This is my first time working with Css 3.10. I'm coming from a different tech stack and learning Css. Thanks in advance! Any feedback is welcome!