複数の :before 擬似要素を 1 つの HTML 要素に適用できますか?

疑似要素の前に複数: 制限の概要

質問:

は複数できます:before 擬似要素が単一の HTML に適用されるelement?

答え:

残念ながら、CSS2.1 では同じ要素に対して複数の :before 疑似要素を持つことはできません。要素には、:before と :after を含む、任意の種類の疑似要素を一度に 1 つだけ含めることができます。

説明:

複数の :before ルールが適用される場合同じ要素に追加すると、それらはカスケードされ、単一の :before 擬似要素にマージされます。最も高い優先順位を持つ最上位のルールのみがその宣言を適用されます。これは、通常の CSS プロパティに対するカスケードの動作と一致しています。

したがって、この例では、

.circle:before {
    content: "CF";
    font-size: 19px;
}
.now:before{
    content: "Now";
    font-size: 19px;
    color: black;
}

2 番目のルールのみが適用され、出力は次のようになります。

.circle.now:before {
    content: "Now";
    font-size: 19px;
    color: black;
}

代替アプローチ:

この制限を克服するには、次のいずれかを行うことができます。

• 複数のルールを単一のセレクターに結合します (.circle.now:before など)。これにより、両方のルールが要素に適用されます。
• を使用します。 Sass または Less のような CSS プリプロセッサ。これにより、セレクターをネストし、同じ要素に対して複数の :before 疑似要素を作成できます。要素。

以上が複数の :before 擬似要素を 1 つの HTML 要素に適用できますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。