Меньше css, вложенные атрибуты: hover:: after

Можно ли сделать это с меньшими затратами?

a {
    &:after {
        background: red;
    }
    &:hover {
        &:after {
            background: blue;
        }
    }
}

Я не могу заставить :after менять цвет при наведении курсора на a?

Ответ 1

Следующие работы отлично подходят для меня:

a {
    &:after {
        content:'a';
        background: red;
    }
    &:hover {
        &:after {
            background: blue;
        }
    }
}

Мой LESS-редактор, скомпилированный для:

a:after {
  content: 'a';
  background: red;
}
a:hover:after {
  background: blue;
}

Что работает.

Ответ 2

Это также хорошо работает для меня:

 a{
    &:after{
        background: red;
        content: "Hover Text"
    }
    &:hover{
        &:after{
            background: yellow;
        }
    }
}

И Мой терминал Скомпилируйте это так:

a:after {
  background: red;
  content: "Hover Text";
}
a:hover:after {
  background: yellow;
}

Ответ 3

a {

  &:after {

     background: red;

  }

  &:hover,
  &:after {

     background: blue;

  }

}

Теперь все в порядке: P