同じ要素に対して複数の：before疑似要素を持つことはできますか？

:before同じ要素に複数の疑似を持つことは可能ですか？

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

上記のスタイルをjQueryを使用して同じ要素に適用しようとしていますが、最新のスタイルのみが適用され、両方が適用されることはありません。

CSS2.1では、要素は常に、任意の種類の疑似要素のうち最大で1つしか持つことができません。（これは、要素に:beforeと:after疑似要素の両方を含めることができることを意味します。各種類を複数持つことはできません。）

その結果、:before同じ要素に一致する複数のルールがある場合、それらはすべて:before通常の要素と同様にカスケードされ、単一の疑似要素に適用されます。あなたの例では、最終結果は次のようになります：

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

ご覧のcontentとおり、最も優先度の高い宣言（前述のとおり、最後に来る宣言）のみが有効になります。他のCSSプロパティと同様に、残りの宣言は破棄されます。

この動作は、CSS2.1のセレクタセクションで説明されています。

疑似要素は、CSSの実際の要素と同じように動作しますが、以下で説明する例外があります。

これは、疑似要素を持つセレクターが通常の要素のセレクターと同じように機能することを意味します。これは、カスケードが同じように機能することも意味します。奇妙なことに、CSS2.1が唯一のリファレンスのようです。どちらもCSS3-セレクタやCSS3、カスケードすべてでこれを言及し、それが将来の仕様で明らかにされるかどうかを見守らなければなりません。

要素が同じ疑似要素を持つ複数のセレクターと一致する可能性があり、それらすべてに何らかの方法で適用したい場合は、組み合わせたセレクターを使用して追加のCSSルールを作成し、ブラウザーでこれらを実行する必要があることを正確に指定できるようにする必要があります。ケース。contentここにプロパティを含む完全な例を提供することはできません。たとえば、シンボルとテキストのどちらを最初にするかは明確ではないためです。ただし、この組み合わせたルールに必要なセレクタは、.circle.now:beforeまたはの.now.circle:beforeどちらかです。どちらのセレクタも同等なので、どちらを選択するかは個人の好みでcontentあり、自分で定義する必要があるのはプロパティの値だけです。

それでも具体的な例が必要な場合は、この同様の質問に対する私の回答を参照してください。

レガシーCSS3コンテンツ仕様は、複数の挿入のセクション含ま::beforeと::after擬似要素を CSS2.1カスケードと互換性の表記を使用するが、その特定の文書が廃止されることに注意してください-それは2003年以来更新されておらず、誰も持っていません過去10年間でその機能を実装しました。良いニュースは、破棄されたドキュメントがcss-content-3およびcss-pseudo-4を装って積極的に書き換えられていることです。悪い知らせは、複数の疑似要素機能がどちらの仕様にも見当たらないことです。これも、おそらく、実装者の関心がないためと思われます。

メイン要素に子要素またはテキストが含まれている場合は、それを利用できます。

メイン要素を相対（または絶対/固定）に配置し、：beforeと：afterの両方を絶対配置に使用します（私の状況では絶対である必要があり、自分のことは知りません）。

もう1つの疑似要素が必要な場合は、相対：絶対/固定/固定ではない、絶対：beforeをメイン要素の子の1つに追加します（テキストのみの場合は、それをスパンに入れます。これで要素があります）。 。

この要素は、彼の所有者があなたの主な要素であるかのように振る舞います。

HTML

<div class="circle">
    <span>Some text</span>
</div>

CSS

.circle {
    position: relative; /* or absolute/fixed */
}

.circle:before {
    position: absolute;
    content: "";
    /* more styles: width, height, etc */
}

.circle:after {
    position: absolute;
    content: "";
    /* more styles: width, height, etc */
}

.circle span {
    /* not relative/absolute/fixed */
}

.circle span:before {
    position: absolute;
    content: "";
    /* more styles: width, height, etc */
}

私はこれを使って解決しました：

.element:before {
    font-family: "Font Awesome 5 Free" , "CircularStd";
    content: "\f017" " Date";
}

アイコンにフォントファミリ「font awesome 5 free」を使用します。その後、再度使用するフォントを指定する必要があります。これを行わないと、ナビゲーターがデフォルトのフォントを使用するためです（新しいローマ字など）この）。