Zugriff auf den CSS-Selektor “: after” mit jQuery

Ich habe folgendes CSS:

.pageMenu .active::after { content: ''; margin-top: -6px; display: inline-block; width: 0px; height: 0px; border-top: 14px solid white; border-left: 14px solid transparent; border-bottom: 14px solid white; position: absolute; right: 0; } 

Ich möchte die Rahmenbreite des oberen, linken und unteren Rahmens mit jQuery ändern. Welchen Selektor verwende ich, um auf dieses Element zuzugreifen? Ich habe Folgendes versucht, aber es scheint nicht zu funktionieren.

 $('.pageMenu .active:after').css( { 'border-top-width': '22px', 'border-left-width': '22px', 'border-right-width': '22px' } ) 

Sie können nicht manipulieren :after , weil es technisch nicht Teil des DOM ist und daher von keinem JavaScript erreichbar ist. Sie können jedoch eine neue class mit einer neuen hinzufügen :after Angabe.

CSS:

 .pageMenu .active.changed:after { /* this selector is more specific, so it takes precedence over the other :after */ border-top-width: 22px; border-left-width: 22px; border-right-width: 22px; } 

JS:

 $('.pageMenu .active').toggleClass('changed'); 

UPDATE: Während es unmöglich ist, den :after Inhalt direkt zu modifizieren, gibt es Möglichkeiten, es mit JavaScript zu lesen und / oder zu überschreiben. Siehe “Manipulieren von CSS-Pseudoelementen mit jQuery (zB: before und: after)” für eine umfassende Liste von Techniken.

Sie können Stil hinzufügen für : nach einem ähnlichen HTML-Code.
Beispielsweise:

 var value = 22; body.append(''); 

Wenn Sie jQuery built-in after() mit leerem Wert verwenden, wird ein dynamisches Objekt erstellt, das Ihrem CSS-Selektor :after .

 $('.active').after().click(function () { alert('clickable!'); }); 

Siehe die jQuery-Dokumentation .