CSS でテキストを動的に挿入できますか?

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

CSS では、テキストのスタイルと書式設定を簡単に変更できます。ただし、CSS を使用してテキストを挿入することもできることをご存知ですか?

次の例を考えてみましょう。「すべてのエントリを調整する」というテキストが、以下に属している場合は「ジョーのタスク: すべてのエントリを調整する」として表示したいとします。クラス「OwnerJoe」。 「Joe's Task:」というテキストを手動で追加することもできますが、冗長で非効率的です。

CSS ソリューション

純粋に CSS を使用してこれを実現するには、以下を利用できます。 ::前 pseudo-element:

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

この CSS スニペットは、クラス「OwnerJoe」を持つ要素の前に指定されたテキストを挿入します。ただし、これには CSS2 をサポートするブラウザ (すべての主要なブラウザと IE8 を含む) が必要であることに注意してください。

代替: JavaScript の使用

JavaScript ベースのソリューションを希望する場合、jQuery を使用してテキストを動的に挿入できます:

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

この JavaScript コードはスパンを挿入します。クラス「OwnerJoe」の各要素の前にテキスト「Joe's Task:」を含む要素

ListItem with Text Bullet

テキスト ブロックの使用に関するご質問についてリストの箇条書きとして、それは可能ですが、より複雑な CSS ソリューションが必要です。 1 つのアプローチには、背景画像や擬似要素などの CSS3 テクニックを使用してカスタム箇条書きを作成することが含まれます。

CSS はドキュメントのスタイル設定や操作に強力なツールですが、より複雑な場合には制限があることに注意してください。ダイナミック テキストの挿入などのタスク。このような場合、多くの場合、JavaScript、または CSS と JavaScript の組み合わせがより適切です。

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