1. ホーム
  2. ハイパーリンク

[解決済み】CSSコンテンツプロパティ:Textの代わりにHTMLを挿入することは可能ですか?

2022-04-03 13:05:34

質問

ただ、どうにかしてCSSの content プロパティに文字列の代わりに html コードを挿入します。 :before または :after のような要素です。

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

これはかなり便利だと思います。Javascriptでも可能ですが、CSSを使うと本当に楽になりますよ :)

解決方法は?

残念ながら、これは不可能です。につきまして 仕様 :

生成されたコンテンツは、文書ツリーを変更しない。特に、文書言語処理系にフィードバックされることはありません(例えば、再解析のため)。

つまり、文字列の値については、その値が常に文字通りに扱われることを意味する。使用されている文書言語に関係なく、マークアップとして解釈されることはない。

例として、与えられたCSSを次のようなHTMLで使用した場合。

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

...を実行すると、次のような出力が得られます。

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