CSS または JavaScript を使用して要素の前にカスタム テキストを挿入するにはどうすればよいですか?

CSS を使用したテキスト インジェクションの作成

基本的な CSS からより高度なテクニックに移行するとき、テキストの表示を強化する方法を模索するのは自然なことです。そのような課題の 1 つは、クラス名に基づいて特定の要素の前にカスタム テキストを挿入することです。

CSS を使用したテキストの挿入

あなたの質問では、「ジョーのタスク:」を表示することを目的としています。 " クラス「OwnerJoe」のテキスト要素の前に。従来は、要素自体の中にテキストを含めることができました。

<span class="OwnerJoe">Joe's Task: reconcile all entries</span>

ただし、クラスとテキスト コンテンツの両方を指定する場合、この方法は冗長になります。

この要望に応えるために、CSS は次のようなサービスを提供します。解決策:

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

このルールは、指定されたテキスト (「Joe's Task:」) をテキストの前に挿入するようにブラウザに指示します。 「OwnerJoe」クラスの要素。これには CSS2 準拠のブラウザが必要であることに注意してください。

代替アプローチ: JavaScript

CSS はこのタスクを処理できますが、特に必要な場合は、JavaScript がより簡単なアプローチを提供します。ダイナミックテキストインジェクション。 jQuery の使用:

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

以上がCSS または JavaScript を使用して要素の前にカスタム テキストを挿入するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。