のようなCSS疑似要素：前に

Question

私は疑似要素の動作について混乱しています。次のように私は

The :before and :after pseudo-elements W3Cから学ぶだから、私の質問は：

HTML：

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

はCSS：

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

私は新しいコンテンツが内側に挿入するかどうかを知りたいですdivタグまたは外側にあります。 1が正しい

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や他のほとんどの主要なブラウザがそうです。私はこれが必ずしもあなたの質問に答えるわけではないが、あなたのところでいくつか実験をしなければならないことを知っている。そして、他のブラウザをテストすることを忘れないでください。 w3.orgの仕様によれば

Answer 3

：

著者 と生成されたコンテンツのスタイルと場所を指定：疑似要素の後：前。その名前が示すように、 ：beforeおよび：after擬似要素は、コンテンツの場所をの要素の文書ツリーの内容の前後に指定します。 'content' プロパティは、これらの擬似要素と共に、 が挿入されているものを指定します。

出典：http://www.w3.org/TR/CSS2/generate.html

だから、ベースタグ内です。

また、「overflow：hidden;」を適用してテストすることもできます。タグをベースにして、移動しようとしています：その外側の/：before要素の後ろに "position：absolute"を付けてください。

例コード：それらはクリッピングされるようhttp://jsfiddle.net/VDBex/

、彼らは、ベースタグの内部に位置していると仮定する。