CSS 疑似要素の ::before や ::after は文字だけでなく,SVG を指定することもできます. クラスを指定するだけでデザインが適用できるので,毎回 HTML ソースに追加するような手間なく SVG を使用できるようになるので超楽です. 大きさ指定不要の場合 最も簡単なのは content に直接 URL を指定してしまうことです. url() を使用することで,SVG ファイルを相対パスで呼ぶことができます. p::before { content: url("../assets/example.svg"); } しかし,この方法では SVG のサイズを変更することができません. 大抵の場合は大きさを変更しないと見た目が大変なことになるので,次の方法を使います. 大きさ指定する場合 content ではなく,background-image として SVG を読み込むと,