少ないcss、ネストされた属性、：hover :: after

Question

これをもっと少なくすることは可能ですか？

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

上にカーソルを合わせると色を変えることができませんか？

Answer 1

次は私のためにうまくいきます：

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

私のLESS対応エディタは、それを次のようにコンパイルしました：

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

動作します。

Answer 2

これは私にとってもうまくいく：-

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

そして、私の端末をコンパイルして：-

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