css 伪元素，例如 :before

Question

我对伪元素的行为感到困惑。我向w3c学习The :before and :after pseudo-elements

所以，我的问题如下：

html：

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

css：

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

我想知道新内容是插入到div标签里面还是外面。

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

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

哪一个是对的？提前非常感谢！

Answer 1

This slideshow 提到了这个问题，无论如何都是非常好的信息。

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

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

这是official documentation

Answer 2

指定的 CSS“内容”由浏览器生成。类似于子弹等。所以最大的答案是它取决于浏览器。事实上，IE6 和 IE7（除非打补丁）都不理解 CSS 内容属性。但是 IE8 和大多数其他主要浏览器都可以。我知道这不一定能回答您的问题，但您必须进行一些实验。并且不要忘记测试其他浏览器。

Answer 3

根据 w3.org 的规范：

作者使用 :before 和 :after 伪元素。正如他们的名字所示， :before 和 :after 伪元素指定内容的位置 元素的文档树内容之前和之后。内容' 属性与这些伪元素一起指定什么是 插入。

来源：http://www.w3.org/TR/CSS2/generate.html

所以它在基本标签内。

您也可以通过应用“溢出：隐藏；”来测试它。到基础标记并尝试使用“位置：绝对”将 :after/:before 元素移动到它之外。

示例代码：http://jsfiddle.net/VDBex/

当它们被剪裁时，我假设它们位于基本标记内。