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?

CodePudding user response：

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%;
      }
    }
}

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

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%;
}

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>