[解決済み】jQueryでcssの":after "セレクタにアクセスする【重複あり

質問

以下のような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'
        }
    )

解決方法は？

を操作することはできません。 :after なぜなら、それは技術的に DOM の一部ではないので、どの JavaScript からもアクセスできないからです。しかし、あなたは できる 新しいクラスを追加するには、新しい :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 の内容を読み取ったり上書きしたりする方法があります。参照 jQueryを使ったCSS擬似要素の操作（例：beforeとafter）" をご覧ください。