::beforejQuery を使用して、および::after(およびセミコロンが 1 つ付いた古いバージョン)などの CSS 疑似要素を選択/操作する方法はありますか?
たとえば、私のスタイルシートには次のルールがあります。
.span::after{ content:'foo' }
バニラ JS または jQuery を使用して 'foo' を 'bar' に変更するにはどうすればよいですか?
ベストアンサー1
また、データ属性を持つ疑似要素にコンテンツを渡し、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';
}