Less CSS，嵌套属性，:hover::after

Question

能否用更少的方式完成这个任务？

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

当我悬停在 a 上时，无法使 :after 改变颜色。

- Philip

---

你能展示一下你的HTML吗？ - Alessandro Minoccheri

这绝对有效。 - Calvin

假设原始发帖者确实在首次使用 content 生成了伪元素，这个信息在问题中缺失。 - BoltClock

糟糕，我的错误，我在类中漏掉了一个“;”。因此它没有起作用。 - Philip

Answer 1

以下方法对我来说运作良好:

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

我的支持LESS的编辑器将其编译为：

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

哪个确实有效。

- Robert McKee

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

- Sunil R.

Answer 3

a {

  &:after {

     background: red;

  }

  &:hover,
  &:after {

     background: blue;

  }

}

现在这样就可以了 :P

- miber