28

:after次のシナリオで、セレクターが機能するためにコンテンツ プロパティが必要なのはなぜですか?

.test {
    width: 20px;
    height: 20px;
    background: blue;
    position:relative;
}
			
.test:after {
    width: 20px;
    height: 20px;
    background: red;
    display: block;
    position: absolute;
    top: 0px;
    left: 20px;
}
<div class="test"></div>

content プロパティを指定するまで疑似要素が表示されないことに注意してください。

.test {
    width: 20px;
    height: 20px;
    background: blue;
    position:relative;
}
			
.test:after {
    width: 20px;
    height: 20px;
    background: red;
    display: block;
    position: absolute;
    top: 0px;
    left: 20px;
    content:"hi";
}
<div class="test"></div>

なぜこれが意図された機能なのですか? 表示ブロックが要素を強制的に表示すると考えるでしょう。奇妙なことに、Web デバッガー内で実際にスタイルを確認できます。ただし、ページには表示されません。

4

5 に答える 5

27

さまざまな W3C 仕様とドラフトへの参照を次に示します。

セレクター レベル 3

および疑似要素:beforeを:after使用して、生成されたコンテンツを要素のコンテンツの前後に挿入できます。

および:before疑似:after要素

:before作成者は、および:after疑似要素を使用して、生成されたコンテンツのスタイルと場所を指定します。名前が示すように、:beforeおよび:after疑似要素は、要素のドキュメント ツリー コンテンツの前後のコンテンツの場所を指定します。プロパティはcontent、これらの疑似要素と組み合わせて、挿入されるものを指定します。

コンテンツ属性

初期：なし

このプロパティは、ドキュメント内のコンテンツを生成するために:beforeおよび:after疑似要素と共に使用されます。値には次の意味があります。

none -疑似要素は生成されません。

::beforeおよび::after疑似要素に適用されるスタイリングは、生成されたコンテンツの表示に影響します。content属性はこの生成されたコンテンツであり、それが存在しない場合、デフォルト値のcontent: noneが想定されます。つまり、スタイルが適用されるものは何もありません。

複数回繰り返したくない場合は、CSS 内のすべての要素と疑似要素をcontent:'';グローバルにスタイル設定するだけで、これをオーバーライドできます( JSFiddle の例)。::before::after

::before, ::after {
    content:'';
}
于 2013-06-12T14:55:55.423 に答える
20

各and/or疑似要素のcontent: ''宣言が必要な理由は、 の初期値が であり、と疑似要素を計算するためです。仕様を参照してください。::before::aftercontentnormalnone::before::after

の初期値がcontent空の文字列ではなく、および疑似要素noneに対して計算される値である理由は 2 つあります。::before::after

  1. すべての要素の最初と最後に空のインライン コンテンツを配置するのは、ばかげています。::beforeおよび疑似要素の本来の目的は、元::afterの要素のメイン コンテンツの前後に生成されたコンテンツを挿入することです。挿入するコンテンツがない場合、何も挿入するためだけに追加のボックスを作成しても意味がありません。したがって、none追加のボックスの作成を気にしないようにブラウザに指示する価値があります。

    空要素::beforeと::after疑似要素を使用して、レイアウトの美学のみを目的として追加のボックスを作成する慣行は比較的新しく、一部の純粋主義者は、この理由からそれをハックと呼ぶことさえあります。

  2. すべての要素の最初と最後に空のインライン コンテンツがあるということは、すべての (置換されていない) 要素 ( htmlandを含む)bodyがデフォルトで 1 つのボックスではなく、最大3 つのボックスを生成することを意味します (既に複数のボックスを生成する要素の場合はさらに多くのボックスを生成します)。リストスタイルを持つ要素のように、主要なボックスだけではありません)。要素ごとに 2 つの余分なボックスのうち、実際に使用するボックスはいくつありますか? これは、レイアウトのコストを3 倍にする可能性があり、利益はほとんどありません。

    現実的には、この 10 年間でさえ、ページ上の要素の 10% 未満がレイアウト用の疑似要素を必要::beforeとするでしょう。::after

したがって、これらの疑似要素はオプトインされます。なぜなら、それらをオプトアウトすることは、システム リソースの浪費であるだけでなく、本来の目的を考えると明らかに非論理的だからです。パフォーマンス上の理由から、を使用してすべての要素に対して疑似要素を生成することをお勧めしません::before, ::after。

しかし、なぜdisplayプロパティのデフォルトをnoneon にしないのかと疑問に思うかもしれません::before, ::after。単純: の初期値が でdisplayはないためnoneです。ですinline。インラインで表示できないため、inline計算をオンnoneにすることはオプションではありません。プロパティは初期値を 1 つしか持てないため::before, ::after、初期値をon にするdisplayことはできません。(これが、 の初期値が常にであり、単にonを計算するように定義されている理由です。)none::before, ::aftercontentnormalnone::before, ::after

于 2017-03-07T16:21:06.943 に答える
5

を追加するまでcontent: ...、疑似要素は実際には存在しません。

他のスタイル プロパティを設定するだけでは、ブラウザに要素を強制的に作成させるには不十分です。

于 2013-06-12T14:20:03.990 に答える
1

2020 編集

:before

CSS2 からの構文は、CSS3 から最新の構文を作成する必要があります。

::before

二重セミコロン付き

完全な回答と違いは次の場所にあります: What is the difference between :before and ::before?

于 2020-10-23T10:39:20.333 に答える