CSS伪元素，例如:before

Question

我对伪元素的行为感到困惑。我从w3c学习了:before和:after伪元素

所以，我的问题如下：

html:

<div id="breadcrumbs">this is a old content.</div>

CSS：

#breadcrumbs:before {
    content:"this is a new content."
}

我想知道新内容是插入在 div 标签内部还是外部。

1. <div id="breadcrumbs">这是新内容。这是旧内容。</div>

2. 这是新内容<div id="breadcrumbs">这是旧内容。</div>

哪一个是正确的？非常感谢！

- Jason

---

引用您链接中的内容：“将在整个段落周围（包括初始字符串）呈现实心绿色边框。” - NGLN

Answer 1

这个幻灯片（链接）提到了这个问题，无论如何都是非常有用的信息。

根据Chris Coyier的说法，这将是第一次。

<div id="breadcrumbs"><span>this is a new content.</span>this is a old content.</div>

这里是官方文档。

- Joseph Marikle

---

但是我看到了ppk关于:before和:after的博客(http://www.quirksmode.org/css/beforeafter.html)，其中写道：“这是一个测试:before和:after的例子，你可以在每个HTML元素之前和之后放置文本或图像。”你会注意到描述中提到“在每个HTML元素之前和之后”。那么，这里的HTML元素是指文本节点还是包装器？ - Jason

具体来说，它是指在元素的文档树内容之前和之后。另请参阅：https://dev59.com/bXE85IYBdhLWcg3w1HOF#4660434 - Wesley Murch

Answer 2

CSS中指定的“content”是由浏览器生成的，类似于项目符号等。因此，最终答案取决于浏览器。实际上，IE6和IE7（除非打了补丁）都不理解CSS content属性。然而，IE8和大多数其他主要浏览器都支持该属性。我知道这并不一定回答了你的问题，但你需要进行一些实验。别忘了测试其他浏览器。

- Jeff Willener

Answer 3

根据w3.org的规范：

作者使用:before和:after伪元素来指定生成内容的样式和位置。正如它们的名称所示，:before和:after伪元素指定了在元素的文档树内容之前和之后的内容位置。'content'属性与这些伪元素结合使用，指定要插入的内容。

来源：http://www.w3.org/TR/CSS2/generate.html 所以它是在base标签内部。

此外，您可以通过将"overflow: hidden;"应用于base标签，并尝试使用"position: absolute"将:before/:after元素移动到其外部进行测试。

示例代码：http://jsfiddle.net/VDBex/ 由于它们被裁剪，我假设它们位于base标签内部。

- Alexey Ivanov