【CSS】<ul>リストの黒丸を※に変更する

HTML の <ul> タグで作成したリストの黒丸を任意の文字に変更する方法についてです。
今回は、タイトルにある通り「※」に変更しました。

実装にはこちらの記事を参考にさせていただきました。

css – Style bullet-list with arrows – Stack Overflow
https://stackoverflow.com/questions/46802769/style-bullet-list-with-arrows

まず、HTML はこんな感じ。

<ul>
  <li>項目1</li>
  <li>項目2</li>
  <li>項目3</li>
</ul>

次に CSS が下記のとおりです。

ul {
  list-style: none; }
  ul li {
   position: relative; }
   ul li:before {
     content: '※';
     position: absolute;
     left: -20px; }

まず、2行目の list-style: none; でデフォルトのリストの黒丸を非表示にしています。
そして、5～8 行目で、非表示にした黒丸のかわりの※を追加しています。
<li> の前位置に※を表示するようにし、その表示位置は position: absolute; と left: -20px; で指定しています。
なお、left: -20px; は私の感性でこのくらいかな？と決めているだけなので、※ 以外を使用する場合は適宜調整した方が良いと思います。
なお、4行目の <li> に position: absolute; は、※の表示位置の基準とするためです。

必要なコードは以上です！
黒丸の代わりに指定した文字によっては、font-size や font-weight などを調整したほうがいいかもしれません。
このあたりは、実際に実装してみて調整してください。

以上、CSS で <ul> リストのデフォルトの黒丸を任意の文字に変更する方法についてでした。
ご参考になれば幸いです。