问题
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?
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;
}
回答1:
This should now work on all up to date browsers.
To get it to work, you need to add content:""; in your after.
回答2:
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.
来源：https://stackoverflow.com/questions/18767633/is-it-possible-to-have-a-after-pseudo-element-on-a-button