先日、Web制作案件で「liタグのafterでbackground-imageを使い矢印アイコンを表示させる。そしてクリックしたら別の矢印アイコンに入れ替える」という仕様を実現させる必要がありました。
いろいろ調べた結果、jQueryでは直接疑似要素の値をいじることができなさそうだったので、「クリックしたときにliタグにisActiveクラスを付与。isActiveクラスがついているliタグの疑似要素afterのbackground-imageを指定する記述を追記」して対応しました。
同じ様な問題に直面している方のメシアになれるよう下記にコードなど記します。
jQueryで疑似要素beforeやafterの値を変更するサンプルコード
CSSは以下です。
style.css
.Item:after{
content: '';
display: inline-block;
position: absolute
top: 50%
right: 36px
transform: translateY(-50%);
width: 18px
height: 12px
background-image: url(../../images/sample01.png);
background-size: contain;
background-repeat: no-repeat;
}
.Item.isActive:after{
background-image: url(../../images/sample02.png);
}jsの例。
js
$('.Item').on('click', function(){
$(this).addClass('isActive');
});次はこの記事！
【jQuery】スクロールして可視範囲に入ったら下線を引くアニメーションの作り方 
【CSS】下線を疑似要素afterとspanタグで引く方法 
ホバーしたときに、左から右へ塗りつぶすように背景色が変わるボタンの作り方