Html 使用：after添加背景图像但不添加内容

我有一个按钮，使用图形和圆角

为了使按钮CSS可重复使用，并能够容纳任何长度的文本，同时仍保持圆角，我想使用：after在主按钮后添加结束圆角，这样第一个图像/文本可以增长，圆角将始终固定在结束处

当我添加内容（例如“测试”和一些背景色）时，设法获得：工作后，但当样式上没有内容时，无法使其工作。我只需要背景图像，就这样

您可以看到：after代码，但由于某些原因，它不会显示

#wizard-nav .paging:after
{ 
background-image:url("http://i.imgur.com/GDJgl.png");
height:22px;
width:7px;
}

---

您的背景图像有一个备选方案。例如，您可以使用和而不是应用一些边界半径来生成它，只要您喜欢和边界，并且与处理像这样的背景图像相比，您可以更快地获得相同的效果。例如：

border:red 1px solid;
border-radius:10px;

顺便说一下，因为你的背景图像，它们没有出现。把你的手拿下来。 以下是使用：：before和：：after伪选择器时需要为内容设置值的示例

伪元素也是内联元素，因此如果要定义高度或宽度，则必须将其显示为块元素

例如：

#wizard-nav .paging::after {
    content: "";
    display: block; 
    background-image:url("http://i.imgur.com/GDJgl.png");
    height:22px;
    width:7px;
}

---

工作示例：

如果添加内容会发生什么：；给你的：在选择器之后？@JanHančič我试过了，还试着添加到内容中，看看发生了什么。它似乎仍然忽略了它，除非我实际编写一些东西，比如TEST，否则不会添加任何内容。看：它显示出来了，但你是用白纸写的。@DanOvidiuBoncut你是什么意思？橙色图像是：，这就是需要添加到末尾的全部内容。我不想使用边框半径，因为它在所有浏览器中都不受支持。@Francesca如果文本对于您准备的背景图像来说太大，您认为会发生什么情况？我创建的背景图像比实际需要的长得多。在它太小的地方会有一个断点，但考虑到它比网站的主要内容区域大，它实际上永远不会增长到那个宽度。为什么不使用背景重复？太好了，所以使用时总是需要内容：after-我也这么认为。有什么原因吗？@Francesca:能够控制何时要显示：after伪元素以及何时不想显示伪元素是很有用的，这取决于应用伪元素的元素。您可以通过根本不设置content或设置content:none来强制它不显示，对于伪元素，默认设置为none。

#wizard-nav .paging::after {
    content: "";
    display: block; 
    background-image:url("http://i.imgur.com/GDJgl.png");
    height:22px;
    width:7px;
}