js css before und after

[db1]

Hello,

Ich würde gerne die farbe von before und after auf folgenden li per javascript ändern

<li class="col-xs-4 active" style="background-color: rgb(64, 64, 64);">
::before
<span class="step-text " style="background-color: transparent;">Versand</span>
::after
</li>

aktuell im style-inspector

.checkout-processfunnel li.active:after {
border-left-color: #fd7d00;
}

mein Ansatz - wird nicht gefunden:

 document.querySelectorAll('.col-xs-4 > active::after').forEach(el => {
 el.style.borderLeft = "1px solid #404040";
                    console.log(el);
                                
});

Vielen Dank
lg

 

[Oneixee5]

Pseudo-Elemente wie ::before und ::after sind kein Teil des DOM. Das bedeutet, du kannst sie nicht mit querySelector auswählen und auch nicht direkt mit .style manipulieren. JavaScript „sieht“ diese Elemente einfach nicht.

Ohne die Eigenschaft content wird das Pseudo-Element ::before und ::after vom Browser gar nicht erst erzeugt. Erst wenn dieser gesetzt ist (auch wenn es nur ein leerer String ist), erscheint das Element im DOM-Baum und akzeptiert weitere Styles wie Breiten, Höhen oder Rahmen.

Außerdem ist dein CSS-Selektor (.col-xs-4 > active) syntaktisch nicht korrekt, da das active ein Punkt-Präfix benötigt und > ein direktes Kind-Element sucht (hier sind es aber Klassen auf dem selben Element).
Wenn beide Klassen auf dem gleichen Element sind, schreibt man sie zusammen: .col-xs-4.active. Das > würde bedeuten, dass active ein Kind von col-xs-4 ist.

Das direkte manipulieren von Style-Eigenschaften per JavaScript ist so eine Anfänger-Sache. Das soll nicht abwertend sein - man muss alles erst lernen und verstehen. Man sieht das schnell als nächstliegendste Lösung. Meistens kann man solche Dinge aber mit purem CSS lösen ohne JS.

Für eine bessere Erklärung ist aber mehr Kontext nötig.

Wenn ich das aber richtig verstehe würde folgendes CSS ohne JS ausreichen:

/* Sobald .active vorhanden ist, ändert sich das ::after automatisch */
.col-xs-4.active::after {
    border-left-color: #404040; /* Deine Wunschfarbe */
}