Accedi al selettore css “: after” con jQuery

Ho il seguente 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; } 

Mi piacerebbe cambiare la larghezza del bordo superiore, sinistro e inferiore usando jQuery. Quale selettore usare per accedere a questo elemento? Ho provato quanto segue ma non sembra funzionare.

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

Non puoi manipolare :after , perché non è tecnicamente parte del DOM e quindi è inaccessibile da qualsiasi JavaScript. Ma puoi aggiungere una nuova class con una nuova :after specificato.

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'); 

AGGIORNAMENTO: mentre è imansible modificare direttamente :after contenuto, ci sono modi per leggerlo e / o sovrascriverlo usando JavaScript. Vedi “Manipolazione degli pseudo-elementi CSS usando jQuery (ad esempio: prima e: dopo)” per un elenco completo di tecniche.

Puoi aggiungere lo stile per : dopo un codice HTML simile.
Per esempio:

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

Se usi jQuery built-in after() con valore vuoto creerà un object dinamico che corrisponderà al tuo :after selettore CSS.

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

Vedi la documentazione di jQuery .