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伪元素指定内容的位置   在元素的文档树内容之前和之后。内容'   property与这些伪元素一起指定了什么   插入

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

所以它在基本标签内。

你也可以通过应用“overflow：hidden”来测试它。 to base tag并尝试移动：在/：之前的元素之前使用“position：absolute”。

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

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