为什么 content span:after {content: ' '} 放在 span 里面而不是 after？答案

【问题标题】：Why content span:after {content: ' '} is put inside span and not after?为什么 content span:after {content: ' '} 放在 span 里面而不是 after？
【发布时间】：2015-02-16 11:03:47
【问题描述】：

为什么这个 CSS ...

.sticky-info span:after {content: 'test';}

... 结果...

<div class="sticky-info"><span>Price <strong>&euro;120</strong>::after</span>

有没有办法在<div class="sticky-info"> 内部的每个</span> 后面获取content:'test' <div class="sticky-info"> 内部有几个跨度

【问题讨论】：

所以你想用 test 替换 ::after ？？？？
不，这不可能使用 CSS 生成的内容，除非您将 ::after 伪元素移动到父 <div>。
::before 和 ::after 表示元素的在 CONTENT 之前/之后。
::before 和 ::after 是应用它的元素的影子 DOM。您不能将它们添加到同一级别。我的朋友，你必须想出别的办法。
“跨度后面”是什么意思？

标签： css pseudo-element

【解决方案1】：

你可以这样做：

<div class="sticky-info">
    <span>Price <strong>&euro;120</strong></span>
</div>

CSS：

.sticky-info:after {content: 'test';}

【讨论】：

不知道为什么这被否决了。它将在 span 后面添加内容。
我想它被否决了，因为 OP 想要的是在每个 span 标签之后添加内容的解决方案。使用您的解决方案，它只会将内容添加到 div 标签的末尾。为了实现 OP 真正想要的，他必须在每个周围添加一个
标记容器（尽管我赞成你，因为你没有错）。
谢谢，似乎 OP 在我发布答案后添加了该要求

【解决方案2】：

::before 和 ::after 表示元素的 CONTENT 之前/之后，因此不可能以这种方式。谢谢@Paulie_D 和@Tim S。

【讨论】：

您能否进一步扩展此答案并解释您最终做了什么来解决它？
当然可以，看其他答案。
@Benjamin Gruenbaum：基本上我想在某个
内的每个之后休息一下，在小视口上。在大视口上，无需休息。我没有尝试在小视口上添加中断，而是在大屏幕上隐藏了中断。

【解决方案3】：

http://fiddle.jshell.net/9g8qzt3f/

如果你使用span::after，after会被添加到span的后面，它的内容。要将其放在跨度后面，请使用

 .sticky-info:after {content: 'test';}

【讨论】：

这就是问题所在，我的 .sticky info 里面有几个 span
基本上我想在 .sticky-info 'code'.sticky-info span:after { content: '';显示：块； }
@MDC 如果你想休息一下.. 使用填充或边距。
@MDC 你应该在你的问题中提到这样的事情，否则没人会知道。我的方法只有在你有一个跨度时才有效，因为你的问题只提到了一个。如果您想将它用于多个，最好的方法是使用 jquery。