Accédez au sélecteur css “: after” avec jQuery

J’ai le css suivant:

.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; } 

Je voudrais modifier la largeur de la bordure des bordures supérieure, gauche et inférieure à l’aide de jQuery. Quel sélecteur utiliser pour accéder à cet élément? J’ai essayé ce qui suit, mais cela ne semble pas fonctionner.

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

Vous ne pouvez pas manipuler :after , car ce n’est pas techniquement une partie du DOM et est donc inaccessible par n’importe quel JavaScript. Mais vous pouvez append une nouvelle classe avec un nouveau :after spécifié.

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

MISE À JOUR: bien qu’il soit impossible de modifier directement le :after contenu, il existe des moyens de le lire et / ou de le remplacer en utilisant JavaScript. Voir “Manipulation de pseudo-éléments CSS à l’aide de jQuery (par exemple: before et: after)” pour une liste complète des techniques.

Vous pouvez append du style pour : après un code HTML similaire.
Par exemple:

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

Si vous utilisez jQuery intégré after() avec une valeur vide, cela créera un object dynamic qui correspondra à votre sélecteur CSS :after .

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

Voir la documentation de jQuery .