Moins de CSS, attributs imbriqués,: hover :: after

Question

Est-il possible de faire cela avec moins?

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

Je n'arrive pas à changer la couleur après avoir survolé un?

Answer 1

Les éléments suivants fonctionnent bien pour moi:

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

Mon éditeur LESS, compilé cela pour:

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

Ce qui fonctionne.

Answer 2

C'est aussi très bien pour moi: -

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

Et mon terminal compile cela pour: -

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