Изменить стиль псевдоэлемента на основе класса прародителя

Question

Рассмотрим следующий параметр scss:

.link {
  ....

  span {
    .... 

    &:after {
      ....

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

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

Я хочу изменить цвет фона для псевдоэлемента span :after, когда link либо находится под навесом, либо имеет .activeкласс.

То, что я пробовал (приведенный выше код), похоже, не работает.

Есть что-то, что я пропускаю?

Answer 1

Этот вопрос часто задают, так как , упомянутый в этой теме .

. Они увеличивают размер элемента link до размера span.Хотя я бы порекомендовал переместить селектор :hover и класс .active непосредственно в элемент span.

Answer 2

вы должны попробовать это следующим образом:

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

Рабочий пример: http://jsfiddle.net/92gqap5y/