Kann ich mehrere: vor Pseudoelementen für dasselbe Element haben?

Ist es möglich, mehrere :beforePseudos für dasselbe Element zu haben?

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

Ich versuche, die obigen Stile mit jQuery auf dasselbe Element anzuwenden, aber es wird nur der neueste angewendet, niemals beide.

In CSS2.1 kann ein Element zu jeder Zeit höchstens eines Pseudoelements enthalten. (Dies bedeutet, dass ein Element sowohl ein :beforeals auch ein :afterPseudoelement haben kann - es kann einfach nicht mehr als eines von jeder Art haben.)

Wenn Sie mehrere :beforeRegeln haben, die mit demselben Element übereinstimmen, werden alle :beforewie bei einem normalen Element kaskadiert und auf ein einzelnes Pseudoelement angewendet. In Ihrem Beispiel sieht das Endergebnis folgendermaßen aus:

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

Wie Sie sehen, wird nur die contentDeklaration mit der höchsten Priorität (wie bereits erwähnt, die letzte) wirksam. Der Rest der Deklarationen wird verworfen, wie dies bei jeder anderen CSS-Eigenschaft der Fall ist.

Dieses Verhalten wird im Abschnitt Selektoren von CSS2.1 beschrieben :

Pseudoelemente verhalten sich wie echte Elemente in CSS, mit den unten und anderswo beschriebenen Ausnahmen .

Dies impliziert, dass Selektoren mit Pseudoelementen genauso funktionieren wie Selektoren für normale Elemente. Dies bedeutet auch, dass die Kaskade auf die gleiche Weise funktionieren sollte. Seltsamerweise scheint CSS2.1 die einzige Referenz zu sein. Weder CSS3-Selektoren noch CSS3-Kaskade erwähnen dies überhaupt, und es bleibt abzuwarten, ob dies in einer zukünftigen Spezifikation geklärt wird.

Wenn ein Element mehr als einem Selektor mit demselben Pseudoelement entsprechen kann und Sie möchten, dass alle Elemente irgendwie angewendet werden, müssen Sie zusätzliche CSS-Regeln mit kombinierten Selektoren erstellen, damit Sie genau angeben können, was der Browser in diesen Selektoren tun soll Fälle. Ich kann hier kein vollständiges Beispiel einschließlich der contentEigenschaft angeben, da beispielsweise nicht klar ist, ob das Symbol oder der Text an erster Stelle stehen soll. Der Selektor, den Sie für diese kombinierte Regel benötigen, ist entweder .circle.now:beforeoder .now.circle:before- je nachdem, welchen Selektor Sie auswählen, ist dies eine persönliche Präferenz, da beide Selektoren gleichwertig sind. Es ist nur der Wert der contentEigenschaft, den Sie selbst definieren müssen.

Wenn Sie noch ein konkretes Beispiel benötigen, lesen Sie meine Antwort auf diese ähnliche Frage .

Das Erbe css3-Inhalt - Spezifikation enthält einen Abschnitt zum Einfügen von mehrere ::beforeund ::afterpseudo-Elementen einer Notation , die mit der CSS2.1 Kaskade kompatibel ist, aber beachten Sie, dass dieses bestimmte Dokument ist veraltet - es wird nicht seit 2003 aktualisiert, und niemand hat hat diese Funktion im letzten Jahrzehnt implementiert. Die gute Nachricht ist, dass das verlassene Dokument unter dem Deckmantel von CSS-Content-3 und CSS-Pseudo-4 aktiv umgeschrieben wird . Die schlechte Nachricht ist, dass das Merkmal mit mehreren Pseudoelementen in keiner der beiden Spezifikationen zu finden ist, was vermutlich wiederum auf das mangelnde Interesse des Implementierers zurückzuführen ist.

Wenn Ihr Hauptelement einige untergeordnete Elemente oder Texte enthält, können Sie diese verwenden.

Positionieren Sie Ihr Hauptelement relativ (oder absolut / fest) und verwenden Sie beide: vor und: nach absolut positioniert (in meiner Situation musste es absolut sein, ich weiß nichts über Ihr Element).

Wenn Sie nun ein weiteres Pseudoelement möchten, hängen Sie ein Absolut: Vorher an eines der untergeordneten Elemente des Hauptelements an (wenn Sie nur Text haben, setzen Sie ihn in einen Bereich, jetzt haben Sie ein Element), das nicht relativ / absolut / fest ist .

Dieses Element verhält sich so, als wäre sein Besitzer Ihr Hauptelement.

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 */
}

Ich habe dies behoben mit:

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

Verwenden Sie die Schriftfamilie "font awesome 5 free" für das Symbol. Anschließend müssen Sie die Schriftart angeben, die wir erneut verwenden. Wenn wir dies nicht tun, verwendet der Navigator die Standardschriftart (mal neue römische Schrift oder ähnliches) Dies).