Accedere alla css ": dopo" Selettore con jQuery

Question

Ho la 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 modificare il bordo-larghezza della parte superiore, a sinistra, e bordo inferiore utilizzando 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' 
     } 
    ) 

Answer 1

Non è possibile manipolare :after, perché non è tecnicamente parte del DOM e quindi non è accessibile in qualsiasi JavaScript. Ma tu puoi aggiungere una nuova classe con un nuovo 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'); 

---

UPDATE: mentre è impossibile direttamente modificare il contenuto :after, ci sono modi per leggere e/o di esclusione usando JavaScript. Vedi "Manipulating CSS pseudo-elements using jQuery (e.g. :before and :after)" per un elenco completo di tecniche.

Answer 2

È possibile aggiungere stile per : dopo un codice HTML simile.
Ad esempio:

var value = 22; 
body.append('<style>.wrapper:after{border-top-width: ' + value + 'px;}</style>'); 

Answer 3

Se si utilizza jQuery integrato after() con valore vuoto si creerà un oggetto dinamico che corrispondono alla tua selettore :after CSS.

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

Vedere le jQuery documentation.