SVG を CSS 疑似要素にうまく埋め込むにはどうすればよいですか?

擬似要素への SVG の埋め込み

::before や ::after などの擬似要素に SVG 画像を挿入すると、CSS スタイルに新しい次元がもたらされます。この手法を使用すると、カスタム グラフィックやイラストを使用して Web デザインを視覚的に強化できるようになります。

提供された例では、開発者は ::before を使用して、選択した要素の前に SVG アイコンを配置しようとしました。ただし、コードが SVG コードのプレーン テキストのみを表示するという問題が発生しました。

これを修正するには、仕様で指定されている CSS コンテンツ プロパティの制限を理解することが重要です。幸いなことに、簡単で効果的な解決策があります。それは、url() 関数を利用して SVG ファイルへのパスを指定することです。このアプローチにより、外部 SVG 画像を疑似要素に含めることができます。

#test::before {
  content: url(path/to/your.svg);
  width: 200px;
  height: 200px;
}

また、データ URI スキームを使用して、SVG を CSS 内に直接埋め込むこともできます:

#test::before {
  content: url("data:image/svg+xml, <svg xmlns='http://www.w3.org/2000/svg'></svg>");
  width: 200px;
  height: 200px;
}

これらの方法を使用すると、SVG グラフィックを疑似要素にシームレスに統合し、Web ページの視覚的な魅力を向上させ、あなたのデザインに創造性のタッチを注入します。

以上がSVG を CSS 疑似要素にうまく埋め込むにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。