CSS はクラスのみを使用して要素の前にテキストを動的に挿入できますか?

CSS を使用したテキストの挿入: ガイド

CSS の初心者にとって、テキストの書式設定とスタイルの操作はよく知られた概念です。ただし、CSS を使用してテキストを動的に挿入するなどの課題に直面することがあります。次のシナリオを考えてみましょう:

「OwnerJoe」クラスの要素の前にテキスト「Joe's Task:」を挿入することを目的としています。理想的には、要素内のテキストを明示的に定義せずに、要素のクラスのみを使用してこれを実現することをお勧めします。

オプションの探索

最初は、次の方法に頼ることもできます。要素内にテキストを直接含めます:

<span>

ただし、両方を明示的に指定するため、このアプローチは冗長に見えます。クラスと関連テキスト。

:before

CSS2 では、要素の前にコンテンツを挿入できる :before 疑似クラスが導入されています。これを使用すると、次のように目標を達成できます。

.OwnerJoe:before {
  content: "Joe's Task: ";
}

このルールを適用すると、「OwnerJoe」クラスの要素が見つかるたびに、テキスト「Joe's Task:」がその前に表示されます。

代替: JavaScript

または、JavaScript を使用することもできますこのタスクのために。 jQuery を使用すると、次のコードを実装できます。

$('.OwnerJoe').each(function() {
  $(this).before($('<span>').text("Joe's Task: "));
});

このコードは、「OwnerJoe」クラスのすべての要素を反復処理し、JavaScript を使用して「Joe's Task:」テキストを挿入します。

以上がCSS はクラスのみを使用して要素の前にテキストを動的に挿入できますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。