[[疑似要素 (CSS)|疑似要素]]を使って以下のようにそろえる方法。[[Flexbox]]と[[em (CSS)|em]]を使う。
![[Pasted image 20250112100215.png|frame]]
```css
.list {
font-size: 2rem;
display: flex;
align-items: center;
}
.list::before {
width: 1em;
height: 1em;
margin-right: 5px;
content: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxwYXRoIGQ9Ik0yMiA1LjdsLTQuNi0zLjlsLTEuMyAxLjVsNC42IDMuOUwyMiA1Ljd6TTcuOSAzLjRMNi42IDEuOUwyIDUuN2wxLjMgMS41bDQuNi0zLjh6TTEyLjUgOEgxMXY2bDQuNyAyLjlsLjgtMS4ybC00LTIuNFY4ek0xMiA0Yy01IDAtOSA0LTkgOXM0IDkgOSA5czktNCA5LTlzLTQtOS05LTl6bTAgMTZjLTMuOSAwLTctMy4xLTctN3MzLjEtNyA3LTdzNyAzLjEgNyA3cy0zLjEgNy03IDd6IiBmaWxsPSJjdXJyZW50Q29sb3IiPjwvcGF0aD48L3N2Zz4=");
}
```
`height` に `1em` を指定することで、`.list` のフォントサイズと縦幅を揃えるのがポイント。`width` はSVG画像の比率による。