アクセスCSS「：後」セレクタjQueryを

Question

とI次の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; 
} 

、とjQuery使って下の境界を。この要素にアクセスするために私はどのようなセレクタを使用しますか？私は以下を試しましたが、うまく動作していないようです。

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

Answer 1

それは技術的にDOMの一部ではありませんので、任意のJavaScriptのことでアクセスできないため、あなたは、:afterを操作することはできません。しかし、あなたすることができます新しい:afterと指定して新しいクラスを追加します。

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：それは直接することは不可能ですしながら、:after内容を変更、読むための方法および/またはオーバーライドがありますそれはJavaScriptを使用しています。包括的な技術リストについては、"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を参照してください。