css 伪元素，例如 :before
我对伪元素的行为感到困惑。我从w3c学习 :before 和 :after 伪元素
所以，我的问题如下：
html :
<div id="breadcrumbs">this is a old content.</div>
css:
#breadcrumbs:before {
content:"this is a new content."
}
我想知道新内容是插入div标签内部还是外部。
这是一个新内容
哪一个是正确的？预先非常感谢！
I'm confused about the pseudo-elements behaviour. I learn from w3c The :before and :after pseudo-elements
So, my question is as follows:
html :
<div id="breadcrumbs">this is a old content.</div>
css:
#breadcrumbs:before {
content:"this is a new content."
}
I want to know whether the new content insert inside the div tag or outside.
<div id="breadcrumbs">this is a new content.this is a old content.</div>this is a new content<div id="breadcrumbs">this is a old content.</div>
Which one is the right? Thanks a lot in advance!
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
这张幻灯片提到了这个问题无论如何，这都是非常好的信息。
根据 Chris Coyier 的说法，这将是第一个
，这是官方文档
This slideshow mentions this very question and is a very good bit of information in any case.
According to Chris Coyier it would be the first
and here's the official documentation
指定的CSS“内容”是由浏览器生成的。类似于子弹等。所以最大的答案是这取决于浏览器。事实上，IE6 和 IE7（除非打补丁）都不理解 CSS 内容属性。然而 IE8 和大多数其他主要浏览器都是如此。我知道这不一定能回答您的问题，但您必须进行一些实验。并且不要忘记测试其他浏览器。
The CSS "content" specified is generated by the browser. Similar to bullets, etc. So the big answer would be it's up to the browser. In fact, IE6 nor IE7 (unless patched) don't understand CSS content property. However IE8 and most other major browsers do. I know this doesn't necessarily answers your question but it will have to take some experimenting on your part. And don't forget to test other browsers.
根据 w3.org 的规范：
来源：http://www.w3.org/TR/CSS2/generate.html
所以它在基本标签内。
您也可以通过应用“overflow：hidden;”来测试它到基本标签并尝试使用“position：absolute”将 :after/:before 元素移动到其外部。
示例代码： http://jsfiddle.net/VDBex/
当它们被剪裁时，我假设它们位于内部的基本标签。
According to w3.org's specification:
Source: http://www.w3.org/TR/CSS2/generate.html
So it's inside the base tag.
Also you can test it by applying "overflow: hidden;" to base tag and trying to move :after/:before element outside of it with "position: absolute".
Example code: http://jsfiddle.net/VDBex/
As they are clipped, I assume they are position inside of the base tag.