html - 是否可以在按钮上有一个 :after 伪元素？

Question

我有一个按钮，:hover我想在一个之后的元素上显示。但我看不到它。按钮上可以有:after元素吗？

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

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

Answer 1

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

为了让它工作，你需要content:"";在你的after.

Answer 2

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