0

【CSS】SVGを擬似要素で使う

CSS

Last updated at 2023-11-22Posted at 2023-11-22

test.css

div::before {
    content: "";
	background-image: url("xxx.svg");
    background-size: 50px;
    filter: invert(45%) sepia(85%) saturate(2448%) hue-rotate(163deg) brightness(97%) contrast(103%);
}

background-image: url() でSVGファイルを指定
background-size: で大きさを指定
filter: で色を指定
https://codepen.io/sosuke/pen/Pjoqqp でカラーコードをfilterで使う値に変換できる

0

Register as a new user and use Qiita more conveniently

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up

0