按钮上是否可以包含:after伪元素? [英] Is it possible to have an :after pseudo element on a button?

问题描述

我有一个按钮，在:hover 上，我想显示一个after元素.但是我看不到.

I have a button and on a :hover I would like an after element to show. But I can't see it. Is it possible to have an :after element on a button?

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

推荐答案

现在，它应该可以在所有最新的浏览器上使用.

This should now work on all up to date browsers.

要使其正常工作，您需要在之后之后添加 content:"; .

To get it to work, you need to add content:""; in your after.

这篇关于按钮上是否可以包含:after伪元素?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！