SVG を CSS の疑似要素コンテンツとして使用できますか?

疑似要素コンテンツとして SVG を使用する

CSS コンテンツ プロパティを使用すると、要素の前後にさまざまなタイプのコンテンツを挿入できます。 ::before や ::after などの疑似要素。ただし、含めることができるコンテンツには制限があります。

SVG を疑似要素コンテンツとして使用できますか?

はい、SVG を使用できるようになりました。

SVG を疑似要素として使用する方法コンテンツ

SVG を疑似要素コンテンツとして挿入するには、次の 2 つの方法があります:

1. URL を使用する:

#test::before {
  content: url(path/to/your.svg);
  /* ... other styles */
}

2. SVG の埋め込みCSS:

#test::before {
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='100' cy='50' r='40' stroke='black' stroke-width='2' fill='red'/%3E%3Cpolyline points='20,20 40,25 60,40 80,120 120,140 200,180'>

HTML の例:

<div>

結論:

の使用疑似要素コンテンツとしての SVG は柔軟性を提供し、より視覚的に魅力的な要素を可能にしますベクター グラフィックスを組み込むことで。

以上がSVG を CSS の疑似要素コンテンツとして使用できますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。