[解決済み] 擬似要素 ::before や ::after のコンテンツとして SVG を使用する方法はありますか？

質問

選択した要素の前にSVG画像を配置したいのですが、どうすればいいですか？私はjQueryを使用していますが、それは関係ありません。

を持たせたいと思います。 ::before という要素になります。

#mydiv::before {
  content: '<svg ... code here</svg>';
  display: block;
  width: 22px;
  height: 10px;
  margin: 10px 5px 0 10px;
}

上記のようにすると、文字列が表示されるだけです。仕様を確認したところ、コンテンツの内容に制限があるようです。この制限を回避する方法はあるのでしょうか？CSSのみ content は私の質問に関連しています。

どのように解決するのですか？

はい、できます! 今テストしたところ、とてもうまくいきました。htmlではまだうまくいきませんが、svgではうまくいきます。

私のindex.htmlには、以下のようなものがあります。

<div id="test" style="content: url(test.svg); width: 200px; height: 200px;"></div>

そして、私のtest.svgはこのような感じです。

<svg xmlns="http://www.w3.org/2000/svg">
   <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red"/>
   <polyline points="20,20 40,25 60,40 80,120 120,140 200,180" style="fill:none;stroke:black;stroke-width:3"/>
</svg>