[解決済み] javascript（またはjQuery）を使って::beforeや::afterなどのCSS疑似要素を選択し、操作する。

質問

のような CSS 擬似要素を選択/操作する方法はありますか？ ::before と ::after (とセミコロン1つの古いバージョン）をjQueryを使って？

例えば、私のスタイルシートには以下のようなルールがあります。

.span::after{ content:'foo' }

バニラJSやjQueryを使って、'foo'を'bar'に変更するにはどうしたらいいですか？

どのように解決するのですか？

擬似要素にdata属性でコンテンツを渡し、それをjQueryで操作することもできます。

HTMLでは

<span>foo</span>

jQueryで。

$('span').hover(function(){
    $(this).attr('data-content','bar');
});

CSSでは

span:after {
    content: attr(data-content) ' any other text you may want';
}

その他のテキスト」を表示させないようにしたい場合は、seucolegaさんの解決策と次のように組み合わせるとよいでしょう。

HTMLでは

<span>foo</span>

jQueryで。

$('span').hover(function(){
    $(this).addClass('change').attr('data-content','bar');
});

CSSでは

span.change:after {
    content: attr(data-content) ' any other text you may want';
}