擬似要素にSVGを背景画像として表示する方法
CSSの擬似要素::afterを使って、要素の後ろにSVGを表示する例です。data:image/svg+xmlを使うことで、外部ファイルを用意せずに直接SVGを埋め込むことができます。
See the Pen SVG by oheyril (@oheyril) on CodePen.
CSS
div::after {
display: block;
width: 1em;
height: 1em;
content: "";
background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="%231f1f1f"><path d="M504-480 320-664l56-56 240 240-240 240-56-56 184-184Z"/></svg>');
background-repeat: no-repeat;
background-size: cover;
}SCSS
@mixin svg($color) {
background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="%23#{$color}"><path d="M504-480 320-664l56-56 240 240-240 240-56-56 184-184Z"/></svg>');
}ポイント
data:image/svg+xml;charset=UTF-8,
SVGデータを直接CSSに埋め込むための書き方です。外部ファイルを読み込む必要がありません。fill="%231f1f1f"
SVG内の塗りつぶし色を指定しています。#はURLエンコードで%23に変換しています。