CSS :before および :after セレクターは HTML コンテンツを挿入できますか?

CSS :before および :after セレクターを使用した HTML の挿入

CSS では、:before および :after 擬似要素を使用して、次の要素を追加できます。実際の内容を変更することなく、要素の前後に任意の内容を追加できます。ただし、このアプローチの制限に注意することが重要です。

課題: :before と :after による HTML の追加

次のコードを考えてみましょう:

li.first div.se_bizImg:before {
    content: "<h1>6 Businesses Found <span class="headingDetail">(view all)</span>
</h1>";
}

このスニペットの目的は、:before 疑似要素を使用して HTML 見出しを DOM に挿入することです。ただし、お気づきかと思いますが、このコードは機能しません。

:before と :after によるコンテンツ制限

ここでの重要な問題は、次の content プロパティにあります。 :before および :after セレクター。テキスト コンテンツのみを受け入れます。 HTML はマークアップ言語であるため、このプロパティを使用して直接挿入することはできません。

代替アプローチ

望ましい結果を達成するには、代替アプローチが必要です。 JavaScript または jQuery を使用して DOM を直接操作し、HTML マークアップを挿入することを検討してください。もう 1 つのオプションは、必要な HTML を動的に生成できるテンプレート エンジンを採用することです。

その他の考慮事項

• コード内の " ブロック内の " の使用は間違っています。引用符 (class='HeadingDetail') が適切にネストされていることを確認してください。
• コンテンツを使用して HTML コードを追加すると、コンテンツがその中に再帰的に追加される無限ループが発生する可能性があります。

以上がCSS :before および :after セレクターは HTML コンテンツを挿入できますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。