CSS Variables implementation guide in Pseudo-Elements with SCSS - Need guide
I'm working with an scenario with CSS variables when trying to use them within pseudo-elements. I have a SCSS setup where I'm defining some CSS variables for colors, but when I apply them in a pseudo-element, they don't seem to update as expected. Here's what I've tried: ```scss :root { --main-bg-color: #3498db; --main-text-color: white; } .button { background-color: var(--main-bg-color); color: var(--main-text-color); position: relative; display: inline-block; padding: 10px 20px; border: none; cursor: pointer; &::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: var(--main-bg-color); opacity: 0.5; transition: opacity 0.3s; } &:hover::after { opacity: 1; } } ``` However, when I change `--main-bg-color` in the root, the pseudo-element's background does not update accordingly. I've checked in Chrome and Firefox, and the developer tools show that the variable is set correctly in the root, but the change does not reflect in the pseudo-element. I'm using SCSS version 1.32.0. Is there something I'm missing, or is this a limitation of how CSS variables work with pseudo-elements? I've also tried using `!important`, but that didn't change anything. Any insights would be greatly appreciated!