css伪元素如：

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提到这个问题，在任何情况下都是非常好的信息。

据克里斯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伪元素。正如它们的名称所示， ：之前和之后：伪元素在元素的文档树内容之前和之后指定内容 的位置。 '内容' 属性与这些伪元素一起指定插入的内容是 。

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

所以它的基本标签内。

你也可以通过应用“overflow：hidden;”来测试它。以标记为基础并尝试移动：在“位置：绝对”之后的/：之前的元素之前移动。

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

当它们被剪切，我假设它们是碱标签的内侧的位置。