基于祖父类更改伪元素样式

Question

Consider the following scss:

.link {
  ....

  span {
    .... 

    &:after {
      ....

      .link.active & {
        background-color: red;
      }

      .link:hover & {
        background-color: red;
      }

I want to change the background-color for the span :after pseudo-element when link is either being hovered or has the .active class.

What I've tried ( the code posted above ) doesnt seem to work.

Is there anything I'm missing ?

Answer 1

you should try it like this scheme :

.link {
  span {
    &:after {
     ...
    }
  }
  &.active,
  &:hover {
    span:after {
      background-color: red;
    }
  }
}

Working example : http://jsfiddle.net/92gqap5y/

Answer 2

This question seems to be asked often, as mentioned in this thread .

They increase the size of the link element to be as large as the span . Though I would recommend moving the :hover selector and .active class to the span element directly.