是否可以在按钮上有一个 :after 伪元素？ [复制]答案

【问题标题】：Is it possible to have an :after pseudo element on a button? [duplicate]是否可以在按钮上有一个 :after 伪元素？ [复制]
【发布时间】：2013-09-17 00:55:36
【问题描述】：

我有一个按钮，在 :hover 上我想显示一个 after 元素。但我看不到它。按钮上可以有: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;
}

&lt;button class="button button-primary"&gt;My button&lt;/button&gt;

【问题讨论】：

不要忘记content:""; 在您的:after。
@BeatAlex 这就是为什么伪元素没有出现的答案。
您在 sn-p @feeela 末尾缺少}
@BeatAlex 可能只是一个复制/粘贴错误，因为这是 SASS 语法，并且在原始右括号之前可能有更多定义。不过提示很好。
确保您注意您实际使用的元素。按钮元素应该允许它，但其他 replaced 元素，如 input、img、textarea、select 等则不允许。

标签： html css pseudo-element

【解决方案1】：

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

要让它工作，你需要在你的after 中添加content:"";。

【讨论】：

你知道它在哪个浏览器上不起作用吗？我只是在 browserstack 上试了一把，似乎每个支持伪元素的浏览器都在 <button> 上接受它。

【解决方案2】：

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

【讨论】：