html - CSS コンテンツ プロパティ: テキストの代わりに HTML を挿入できますか?

Question

contentCSSプロパティに文字列の代わりに html コードを挿入し:beforeたり:after、次のような要素を挿入したりすることができるかどうか疑問に思っています。

.header:before{
  content: '<a href="#top">Back</a>';
}

これは非常に便利です...Javascriptを介して行うこともできますが、これにcssを使用すると、本当に生活が楽になります:)

Answer 1

残念ながら、これは不可能です。仕様による：

生成されたコンテンツはドキュメントツリーを変更しません。特に、それはドキュメント言語プロセッサにフィードバックされません（例えば、再解析のために）。

つまり、文字列値の場合、これは値が常に文字どおりに扱われることを意味します。使用しているドキュメントの言語に関係なく、マークアップとして解釈されることはありません。

例として、次のHTMLで指定されたCSSを使用します。

<h1 class="header">Title</h1>

...結果は次のようになります。

<ahref="#top">戻る</a>タイトル

Answer 2

@BoltClock の回答へのコメントでほぼ指摘されているように、最新のブラウザーurl()では、( ) を svg の要素と組み合わせて使用​​して、疑似要素に HTML マークアップを実際に追加できます<foreignObject>。

実際の svg ファイルを指す URL を指定するか、dataURI バージョンで作成することができます ( data:image/svg+xml; charset=utf8, + encodeURIComponent(yourSvgMarkup))

ただし、これはほとんどハックであり、多くの制限があることに注意してください。

• このマークアップから外部リソースを読み込むことはできません(CSS、画像、メディアなど)。
• スクリプトを実行できません。
• これは DOM の一部ではないため、これを変更する唯一の方法は、マークアップを dataURI として渡し、この dataURI を で編集することですdocument.styleSheets。この部分については、DOMParser役立つかもXMLSerializerしれません。
• 同じ操作で URL エンコードされたメディアを<img>タグに読み込むことができますが、これは疑似要素では機能しません (少なくとも今日の時点では、指定すべきではない場所に指定されているかどうかはわかりません。まだ実装されていない機能です)。

次に、疑似要素の HTML マークアップの小さなデモを示します。

/* 
**  original svg code :
*
*<svg width="200" height="60"
*     xmlns="http://www.w3.org/2000/svg">
*
* <foreignObject width="100%" height="100%" x="0" y="0">
*	<div xmlns="http://www.w3.org/1999/xhtml" style="color: blue">
*		I am <pre>HTML</pre>
*	</div>
* </foreignObject>
*</svg>
*
*/

#log::after {
  content: url('data:image/svg+xml;%20charset=utf8,%20%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%2260%22%20width%3D%22200%22%3E%0A%0A%20%20%3CforeignObject%20y%3D%220%22%20x%3D%220%22%20height%3D%22100%25%22%20width%3D%22100%25%22%3E%0A%09%3Cdiv%20style%3D%22color%3A%20blue%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxhtml%22%3E%0A%09%09I%20am%20%3Cpre%3EHTML%3C%2Fpre%3E%0A%09%3C%2Fdiv%3E%0A%20%20%3C%2FforeignObject%3E%0A%3C%2Fsvg%3E');
}

<p id="log">hi</p>