web-dev-qa-db-ja.com

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

CSSのcontentプロパティで、:beforeまたは:afterの文字列の代わりにhtmlコードを挿入することが可能かどうか疑問に思います：

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

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

htmlcsspseudo-elementcss-content
212
zanona

残念ながら、これは不可能です。 spec ごと：

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

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

例として、次のHTMLで特定のCSSを使用します。

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

...は、次の出力になります。

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

193
BoltClock

@BoltClockの答えへのコメントでほとんど述べられているように、 モダンブラウザ では、（url()）とsvgの <foreignObject> 要素を組み合わせて、実際にいくつかのhtmlマークアップを擬似要素に追加できます。

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

しかし、それは大部分がハックであり、多くの制限があることに注意してください：

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

次に、疑似要素内の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>
39
Kaiido

CSS3ページングメディアでは、これはposition: running()およびcontent: element()を使用して可能です。

CSSがページングメディアモジュール用に生成したコンテンツ ドラフトの例：

@top-center {
  content: element(heading); 
}

.runner { 
  position: running(heading);
}

.runnerは任意の要素で、headingはスロットの任意の名前です。

EDIT：明確にするために、基本的にブラウザのサポートがないため、これは主に将来の参照/すでに与えられた「実用的な答え」に加えられることを意図したものです。

5
sol