CSSの疑似要素でSVGを使う方法を毎回検索してしまうので自分用に覚書。
li::before { content: ''; display: inline-block; width: 1em; height: 1em; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23ffffff' viewBox='0 0 16 16'%3E%3Cpath d='M12.736 3.97a.733.733 0 0 1 1.047 0c.286.289.29.756.01 1.05L7.88 12.01a.733.733 0 0 1-1.065.02L3.217 8.384a.757.757 0 0 1 0-1.06.733.733 0 0 1 1.047 0l3.052 3.093 5.4-6.425a.247.247 0 0 1 .02-.022Z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-size: contain; background-position: center; }
これでチェックマークのアイコンがbefore属性に表示される。
fill='%23ffffff'はカラーコード。今回は白色で表示するようにしています。