CSS contentプロパティに文字列の代わりにHTMLコード:beforeまたは次:afterのような要素を挿入させることが可能かどうか疑問に思っています。
.header:before{
content: '<a href="#top">Back</a>';
}
これは非常に便利です... Javascriptを使用して行うこともできますが、CSSを使用すると簡単に生活できます:)
回答:
残念ながら、これは不可能です。仕様ごと：
生成されたコンテンツはドキュメントツリーを変更しません。特に、それはドキュメント言語プロセッサにフィードバックされません（たとえば、再解析のため）。
つまり、文字列値の場合、これは値が常に文字どおりに扱われることを意味します。使用しているドキュメント言語に関係なく、マークアップとして解釈されることはありません。
例として、次のHTMLで指定されたCSSを使用します。
<h1 class="header">Title</h1>...結果は次のようになります。
url属性付きの画像がすでにサポートされていると想像しても、リンクを追加しても、この観点ではそれほど違いはありません。
<img>）、既存の要素に描画されるだけなので、背景画像またはリスト画像を適用しても、実際にはDOMを変更するわけではありません。
url()他の画像と同様に、代わりに外部ファイルを指定する必要があります。
@BoltClockの回答へのコメントでほとんど言及されているように、最近のブラウザーでは、url()svgの<foreignObject>要素と組み合わせて（）を使用して、擬似要素に実際にHTMLマークアップを追加できます。
実際のsvgファイルを指すURLを指定するか、dataURIバージョン（data:image/svg+xml; charset=utf8, + encodeURIComponent(yourSvgMarkup)）で作成することができます。
ただし、これはほとんどハッキングであり、多くの制限があることに注意してください。
document.styleSheets。この部分のために、DOMParserそして助けるXMLSerializerかもしれません。<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>url('/relativePathToMySvg/mySvg.svg')、うまくいきませんでした
/root/css/yourFile.cssにある場合、相対funcIRIのようにyourFile.svgがポイントし/root/css/yourFile.svg/ます。しかし、私は以前のUAにバグがあり、それをドキュメントのbaseURIに対して相対的にしたことを覚えていると思います。したがって、最も安全な方法は、絶対パスを使用することです。
content: url('../../images/como-funciona.svg');そしてそれはうまくいく
CSS3ページングメディアでは、これはposition: running()およびを使用して可能content: element()です。
CSSで生成されたPaged Media Moduleドラフトのコンテンツの例：
@top-center {
content: element(heading);
}
.runner {
position: running(heading);
}.runnerは任意の要素にすることができheading、スロットの任意の名前です。
編集：明確にするために、基本的にブラウザのサポートはありませんので、これは主に将来の参照のために/すでに与えられた「実用的な答え」に加えて意図されていました