为什么content span:after {content: ' '}放在span标签内而不是后面？

Question

Why this 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"> 中有几个元素。

- MDC

---

不，使用CSS生成的内容是不可能实现的，除非您将::after伪元素移动到父级<div>中。 - David Thomas

::before和::after表示元素的内容之前/之后的部分。 - Paulie_D

::before和::after是应用于元素的Shadow DOM。您不能在同一级别上添加它们。您需要想出其他办法，我的朋友。 - Tim S.

“behind the span” 的意思是“在跨度后面”。 - Paulie_D

疑似与https://dev59.com/wIfca4cB1Zd3GeqPnssr#28474453相关的编程内容。 - Harry

Answer 1

你可以这样做：

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

CSS：

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

- Rudi

---

不确定为什么这个被踩了。它将在 span 后面添加内容。 - Rudi

我想它被踩的原因是因为OP想要的解决方案是在每个<span>标签后面添加内容。使用你的解决方案，它只会将内容添加到<div>标签的末尾。为了实现OP真正想要的效果，他必须在每个<span>周围添加一个<div>标签容器（不过我还是给你点赞了，因为你说得没错）。 - Caleb Thornton

谢谢，看起来OP在我回答之后添加了那个要求。 - Rudi

Answer 2

::before和::after指的是元素内容之前/之后，因此不能以这种方式实现。 感谢@Paulie_D和@Tim S。

- MDC

---

你能否再详细地解释一下你最终是如何解决这个问题的？ - Benjamin Gruenbaum

当然可以，看看其他回答就知道了。 - Rudi

您IP地址为143.198.54.68，由于运营成本限制，当前对于免费用户的使用频率限制为每个IP每72小时10次对话，如需解除限制，请点击左下角设置图标按钮（手机用户先点击左上角菜单按钮）。 - MDC

Answer 3

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

如果您使用 span::after，那么 after 将会被添加到 span 元素的内容之后。 如果想让它出现在 span 元素的后面，请使用

。

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

- Rence

---

这就是问题所在，我在 .sticky info 内有几个 span 元素。 - MDC

基本上我想在.sticky-info内的每个span后面加一个断点'code'.sticky-info span:after { content: ''; display: block; } - MDC

@MDC 如果你想要插入一个断点，使用 padding 或 margin。 - Mr_Green

@MDC，你应该在问题中提到这样的事情，否则没有人会知道。我的方法只适用于一个span，因为你的问题只提到了一个。如果你想要用它来处理多个span，最好使用jquery。 - Rence