CSS Transition optimization guide on Pseudo-Element with SASS Nesting in Vue 3 Component
I'm stuck on something that should probably be simple. This might be a silly question, but I'm trying to implement a smooth transition effect on a pseudo-element in my Vue 3 component, but it doesn't seem to work as expected. I'm utilizing SASS for styling and have nested my CSS rules accordingly. However, when I hover over the parent element, the transition effect on the `::after` pseudo-element isn't triggering. Here's what I have: ```scss .parent { position: relative; display: inline-block; &::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 4px; background: blue; transform: scaleX(0); transition: transform 0.5s ease; } &:hover::after { transform: scaleX(1); } } ``` When I hover over the `.parent` element, I expect the blue line to smoothly scale in from the left. Instead, there's no effect at all, and I need to seem to find why it isn't working. I've confirmed that my component is rendering correctly and the SASS compiles without errors. I've also checked that the hover state is being applied with the browser's dev tools. I'm using Vue 3 and SASS 1.34.0. Is there something specific about Vue's rendering or the way SASS handles nesting that might be causing this scenario? Any help would be appreciated! I'm working on a application that needs to handle this. Is there a better approach? This is part of a larger application I'm building. Am I missing something obvious?