JavaScript/jQuery を使用して CSS 疑似要素 (::before、::after) を選択および操作するにはどうすればよいですか?

JavaScript/jQuery を使用した CSS 疑似要素の選択と操作

JavaScript または jQuery を使用して ::before や ::after などの CSS 疑似要素を選択および操作するには、いくつかの異なる手法を使用できます。

を使用したコンテンツの操作jQuery

jQuery を使用すると、次のような疑似要素のコンテンツを取得して操作できます:

// Get the content of ::after for an element with class "span"
var content = $('.span::after').text();

コンテンツを変更するには、新しい値を割り当てるだけです:

// Change the content of ::after for elements with class "span"
$('.span::after').text('bar');

データを使用したコンテンツの操作属性

または、データ属性と jQuery を使用してコンテンツを疑似要素に渡すこともできます。

<!-- Element with a data attribute -->
<span data-content="foo">foo</span>

// Get the content from the data attribute
var content = $('span').attr('data-content');

// Manipulate the pseudo-element content
$('.span::after').text(content);

ホバー時にコンテンツを変更するには、このアプローチを組み合わせることができます。イベント ハンドラーを使用:

$('span').hover(function() {
  // Change the content of ::after on hover
  $(this).attr('data-content', 'bar');
});

span::after {
  content: attr(data-content) /* Combine this with seucolega's solution */ ' any other text you may want';
}

これらのテクニックを使用すると、 Web アプリケーションの擬似要素のコンテンツと外観を動的に制御できます。

以上がJavaScript/jQuery を使用して CSS 疑似要素 (::before、::after) を選択および操作するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。