पहुँच सीएसएस ": के बाद" jQuery

Question

साथ चयनकर्ता मैं निम्नलिखित सीएसएस है:

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

मैं ऊपर, छोड़ दिया की सीमा-चौड़ाई बदलना चाहते हैं, और नीचे सीमा jQuery का उपयोग कर। इस तत्व तक पहुंचने के लिए मैं किस चयनकर्ता का उपयोग करता हूं? मैंने निम्नलिखित की कोशिश की लेकिन ऐसा लगता है कि यह काम नहीं कर रहा है।

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

Answer 1

आप :after में हेरफेर नहीं कर सकते, क्योंकि यह तकनीकी रूप से डोम का हिस्सा नहीं है और इसलिए किसी भी जावास्क्रिप्ट से दुर्गम है। लेकिन आप निर्दिष्ट कर सकते हैं एक नया वर्ग :after निर्दिष्ट के साथ।

सीएसएस:

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

जे एस:

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

---

अद्यतन:करने के लिए असंभव यह है, जबकि सीधे:after सामग्री को संशोधित, वहाँ पढ़ने के लिए तरीके और/या ओवरराइड हैं यह जावास्क्रिप्ट का उपयोग कर रहा है। तकनीकों की एक व्यापक सूची के लिए "Manipulating CSS pseudo-elements using jQuery (e.g. :before and :after)" देखें।

Answer 2

आप के लिए शैली जोड़ सकते हैं: के बाद एक HTML कोड।
उदाहरण के लिए:

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

Answer 3

आप jQuery में निर्मित after() खाली मान का उपयोग करते हैं यह एक गतिशील वस्तु है कि आपके :after CSS चयनकर्ता से मेल करेगा।

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

jQuery documentation देखें।