较少的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;
}

Answer 3

a {

  &:after {

     background: red;

  }

  &:hover,
  &:after {

     background: blue;

  }

}

现在没关系：P