是否可以在按钮上使用：after伪元素？

Question

我有一个按钮，在悬停时我想要一个after元素来显示。 但我看不到它。是否可以在按钮上添加：after元素？

HTML：

<button class="button button-primary">My button</button>

的CSS：

.button {
  cursor: pointer;
  height: 30px;
}

.button-primary {
  border: none;
}
.button-primary:hover:after {
  display: block;
  position: relative;
  top: 3px;
  right: 3px;
  width: 100px;
  height: 5px;
}

Answer 1

这应该适用于所有最新的浏览器。

要使其发挥作用，您需要在content:"";中添加after。

Answer 2

是的，您可以使用它 - 只要您不需要支持某些非常旧的浏览器，例如MS IE 7或更低版​​本。我不知道任何其他浏览器不理解空HTML标记上的伪元素。事实上，我已经在几个生产现场使用它而没有任何问题。