css - css の削減、ネストされた属性、:hover::after

Question

少ない量でこれを行うことは可能ですか？

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

:afterにカーソルを合わせたときに色を変えることができませんaか?

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