急なサイズ変更や色変更にも対応できるので、アイコン類はSVGを使用しておくと何かと便利です。
今回はBootstrapのIconsより、こちらのチェックマークアイコンを使用してSVGアイコンを疑似要素として表示させたいと思います。

SVGアイコンを疑似要素として表示させる方法

 

html上、下記のようなリストがあったとします。

<ul>
    <li>リストA</li>
    <li>リストB</li>
    <li>リストC</li>
</ul>

この各リストの直前に緑のチェックマークが表示されるようなイメージで進めてみます。

まず、SVGコードを用意します。
今回の場合はbootstrap側でコードが用意されていますのでこちらを利用します。

<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-check-lg" viewBox="0 0 16 16">
  <path 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"/>
</svg>

疑似要素で使用するので幅やクラス名は特に必要ないかと思います。
適宜不要な箇所は削除し、ついでにfillの値に緑色を入れておきます。

<svg xmlns="http://www.w3.org/2000/svg" fill="#32CD32" viewBox="0 0 16 16">
    <path 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"/>
</svg>

このようになります。
こちらをCSSの疑似要素として表示させたい場合、次のような書き方になります。

li::before {
    content: '';
    display: inline-block;
    width: 1em;
    height: 1em;
    background-image: url('data:image/svg+xml;utf-8,');
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
}

‘data:image/svg+xml;文字コード,SVGタグ’の形に当てはめればいいのですが、注意点が２点あります。
１つは「#」を「%23」に変える必要があるので、fill=’%2332CD32′に書き換えるというのと、
もう１つはSVGタグ内がダブルクォーテーションでくくられていたらurl(‘…’)の部分はシングルクォーテーションにと行った具合に被らないようにする必要があります。

 

モダンブラウザの場合は上述でいいのですが、IE11に対応させるとなるともうひと手間必要になります。
IEでも理解できるようにSVGのコードをエンコードをしなければならないので面倒なのすが、その際に便利なサイトが下記になります。

URL-encoder for SVG

このサイトの「Insert SVG」の枠にSVGのコードを貼り付けると、IEでも認識してくれるようにエンコードしてくれます。
「Ready for CSS」の枠にはそのまま使えるようにbackground-imageとして出してくれてとても便利です。

こちらを利用した最終形はこのようになります。

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='%2332CD32' 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;
}

お疲れ様でした。
色を変更したい場合はfillの値を変えればいいだけですので画像を新たに用意する必要がなく修正変更作業が楽になるかと思います。

See the Pen Untitled by c-yoshi (@c-yoshi) on CodePen.