CSS疑似要素で単色currentColorになる画像アイコンを使う
CSSの疑似要素(::before
、::after
)で文字色currentColor
の画像アイコンを表示するCSSの記述は以下の通り。
a[download]::before
{
display: inline-block;
margin: 0 0.1875em 0 0;
width: 1em;
height: 1em;
background-color: currentColor;
-webkit-mask: url(data:image/svg+xml,<svg%20version=%221.1%22%20viewBox=%220%200%2016%2016%22%20xmlns=%22http://www.w3.org/2000/svg%22><path%20d=%22m13%2014h-10v-2h-2v4h14v-4h-2zm1-7v-3l-5%205v-9h-2v9l-5-5v3l6%206zm0-3v-0.764zm-12%200v-1.63z%22/></svg>) center / contain;
mask: url(data:image/svg+xml,<svg%20version=%221.1%22%20viewBox=%220%200%2016%2016%22%20xmlns=%22http://www.w3.org/2000/svg%22><path%20d=%22m13%2014h-10v-2h-2v4h14v-4h-2zm1-7v-3l-5%205v-9h-2v9l-5-5v3l6%206zm0-3v-0.764zm-12%200v-1.63z%22/></svg>) center / contain;
content: "";
vertical-align: middle;
}
表示例は以下の通り。
マスクとして使うSVG画像(SVGに限らずラスター画像でもよい)には透過部分を含むようにし、透過していない部分が表示される。上の例では「background-color: currentColor;
」の色が表示される。
こうすることで「:visited
」の色も反映されたアイコンを要素に付加できる。