this is a old content.</div> CSS: #breadcrumbs:before { content:"this is a new"> this is a old content.</div> CSS: #breadcrumbs:before { content:"this is a new"> this is a old content.</div> CSS: #breadcrumbs:before { content:"this is a new" />

次のようなCSS疑似要素:before

I'm confused about the pseudo-elements behaviour. I learn from 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タグの内側か外側に挿入されているかを知りたい。

    </div>

  1. <div id = "breadcrumbs">これは新しいコンテンツです。 </div>

  2. これは新しいコンテンツです<div id = "breadcrumbs">これは古いコンテンツです。

どちらが正しいですか?ありがとうございます!

3
あなたのリンクからの引用:最初の文字列を含め、段落全体に緑色の枠線をレンダリングする
追加された 著者 NGLN,

3 答え

This slideshow mentions this very question and is a very good bit of information in any case.

Chris Coyier氏によると、これは最初の

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

and here's the official documentation

2
追加された
具体的に "... before要素のドキュメントツリーの内容 "の後も参照してください:> stackoverflow.com/questions/2587669/…
追加された 著者 Wesley Murch,
私はppkのブログを見ました:beforeと:after( quirksmode.org/css/beforeafter .html )は "これは:beforeと:afterのテストで、各HTML要素の前後にテキストやイメージを置くことができます。" 「各HTML要素の前後にある」descraptionに気付きました。そこで、html要素はtextnodeですか?またはラッパー?
追加された 著者 Jason,
ありがとう、それは大いに役立つ
追加された 著者 Jason,

w3.orgの仕様によると:

作成者は、生成されたコンテンツのスタイルと場所を   :beforeと:after擬似要素。名前が示すとおり、   :beforeと:after擬似要素はコンテンツの場所を指定する   要素のドキュメントツリーの内容の前後に表示されます。コンテンツ'   プロパティは、これらの擬似要素とともに、何が   挿入されました。

Source: http://www.w3.org/TR/CSS2/generate.html

だからそれはベースタグの内側にある。

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

コード例: http://jsfiddle.net/VDBex/

それらが切り取られるとき、私はそれらがベースタグの内側にあると仮定します。

0
追加された

指定されたCSSの "コンテンツ"は、ブラウザによって生成されます。弾丸などに似ていますので、大きな答えはブラウザに任せます。実際、IE6やIE7(パッチが適用されていない限り)はCSSのコンテンツプロパティを理解していません。しかし、IE8や他のほとんどの主要なブラウザがそうです。私はこれが必ずしもあなたの質問に答えるわけではないが、あなたのところでいくつか実験をしなければならないことを知っている。そして、他のブラウザをテストすることを忘れないでください。

0
追加された
それは大丈夫です、あなたの助言に感謝!
追加された 著者 Jason,