## 絵文字の場合
`label`クラスの`href`属性に`hoge`を含むときカレンダー絵文字を表示したい場合。
```css
.label[href*="hoge"]::before {
display: inline-block;
margin-right: 5px;
content: "📅";
}
```
以下のようにすると..
~~~markdown
```html
<a href="http://hogehoge" class="label">aaa</a>
```
~~~
こうなる。
![[Pasted image 20211031121409.png]]
## [[SVG]]アイコンの場合
- `content`には[[SVG]]アイコンを指定する
- 値の例
- [[SVG]]の[[URL]]
- [[SVG]]を[[Base64]]エンコーディングしたもの (今回の例はコッチ)
- テーマによっては`filter`を使って色彩を調整する
- `width`で画像サイズを指定する
- アイコンを上下中央寄せするため、`position`と`vertical-align`で微調整する
```css
.label[href*="hoge"] {
position: relative;
vertical-align: middle;
padding-left: 20px;
}
.label[href*="hoge"]::before {
display: inline-block;
filter: invert(1) hue-rotate(180deg);
width: 14px;
margin-right: 5px;
content: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgNTEyIDUxMiI+PHBhdGggZD0iTTQ4MCAxMjhhNjQgNjQgMCAwIDAtNjQtNjRoLTE2VjQ4LjQ1YzAtOC42MS02LjYyLTE2LTE1LjIzLTE2LjQzQTE2IDE2IDAgMCAwIDM2OCA0OHYxNkgxNDRWNDguNDVjMC04LjYxLTYuNjItMTYtMTUuMjMtMTYuNDNBMTYgMTYgMCAwIDAgMTEyIDQ4djE2SDk2YTY0IDY0IDAgMCAwLTY0IDY0djEyYTQgNCAwIDAgMCA0IDRoNDQwYTQgNCAwIDAgMCA0LTR6IiBmaWxsPSJjdXJyZW50Q29sb3IiPjwvcGF0aD48cGF0aCBkPSJNMzIgNDE2YTY0IDY0IDAgMCAwIDY0IDY0aDMyMGE2NCA2NCAwIDAgMCA2NC02NFYxNzlhMyAzIDAgMCAwLTMtM0gzNWEzIDMgMCAwIDAtMyAzem0zNDQtMjA4YTI0IDI0IDAgMSAxLTI0IDI0YTI0IDI0IDAgMCAxIDI0LTI0em0wIDgwYTI0IDI0IDAgMSAxLTI0IDI0YTI0IDI0IDAgMCAxIDI0LTI0em0tODAtODBhMjQgMjQgMCAxIDEtMjQgMjRhMjQgMjQgMCAwIDEgMjQtMjR6bTAgODBhMjQgMjQgMCAxIDEtMjQgMjRhMjQgMjQgMCAwIDEgMjQtMjR6bTAgODBhMjQgMjQgMCAxIDEtMjQgMjRhMjQgMjQgMCAwIDEgMjQtMjR6bS04MC04MGEyNCAyNCAwIDEgMS0yNCAyNGEyNCAyNCAwIDAgMSAyNC0yNHptMCA4MGEyNCAyNCAwIDEgMS0yNCAyNGEyNCAyNCAwIDAgMSAyNC0yNHptLTgwLTgwYTI0IDI0IDAgMSAxLTI0IDI0YTI0IDI0IDAgMCAxIDI0LTI0em0wIDgwYTI0IDI0IDAgMSAxLTI0IDI0YTI0IDI0IDAgMCAxIDI0LTI0eiIgZmlsbD0iY3VycmVudENvbG9yIj48L3BhdGg+PC9zdmc+");
position: absolute;
top: 2px;
left: 3px;
}
```
こう書くと..
~~~markdown
```html
<a href="http://hogehoge" class="label">aaa</a>
```
~~~
こうなる。
![[Pasted image 20211031122001.png]]
## 参考
- [CSS の :after でアイコン追加と上下中央配置 \- HAM MEDIA MEMO](https://h2ham.net/add-icon-after-and-middle/)