Change pseudo element when another class present - css

Question

I'm trying to change the after pseudo element when the .active class is added, but this doesn't seem to be working correctly.
I'm currently using scss in my project with Vue. I've already tried the following:
li {
position: relative;
&::after {
opacity: 0;
bottom: -10px;
left: 0;
position: absolute;
content: "";
width: 0%;
height: 3px;
background: $light-blue;
}
}
// When this class is present, adjust the pseudo element to different width
.active {
color: $light-blue;
display: flex;
flex-direction: column;
position: relative;
li::after {
opacity: 1;
width: 60%;
}
}
I've also tried the following as well
.active {
color: $light-blue;
display: flex;
flex-direction: column;
position: relative;
&::after {
opacity: 1;
width: 60%;
}
}
What would be the correct way to adjust the pseudo element from the li element through another class?

Answer 1

In SCSS:
li {
position: relative;
&::after {
opacity: 0;
bottom: -10px;
left: 0;
position: absolute;
content: "";
width: 0%;
height: 3px;
background: $light-blue;
}
&.active {
color: $light-blue;
display: flex;
flex-direction: column;
position: relative;
&::after {
opacity: 1;
width: 60%;
}
}
}
Compiled to the following code in CSS:
li {
position: relative;
}
li::after {
opacity: 0;
bottom: -10px;
left: 0;
position: absolute;
content: "";
width: 0%;
height: 3px;
background: $light-blue;
}
li.active {
color: $light-blue;
display: flex;
flex-direction: column;
position: relative;
}
li.active::after {
opacity: 1;
width: 60%;
}