Html 按钮上是否可以有一个 :after 伪元素？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18767633/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Is it possible to have a :after pseudo element on a button?
提问by user1386906
I have a button and on a hover I want a after element to show. But I can't see it. Is it possible to have a :after element on a button?
我有一个按钮，在悬停时我想要一个 after 元素显示。但我看不到它。按钮上是否可以有 :after 元素？
html:
html：
<button class="button button-primary">My button</button>
css:
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;
}
回答by Albzi
This should now work on all up to date browsers.
这现在应该适用于所有最新的浏览器。
To get it to work, you need to add content:"";in your after.
为了让它工作，你需要content:"";在你的after.
回答by feeela
Yes you can use it – as long as you as don't need to support some very old browsers, e.g. MS IE 7 or lower. I don't know of any other browser that doesn't understand pseudo elements on empty HTML tags. In fact I already used it in several production sites without any problems.
是的，您可以使用它——只要您不需要支持一些非常旧的浏览器，例如 MS IE 7 或更低版本。我不知道有任何其他浏览器不理解空 HTML 标签上的伪元素。事实上，我已经在几个生产站点中使用了它，没有任何问题。
