CSSのlist-styleを白抜き丸〇に変える方法

リストです
リストです
リストです
リストです

⇩

な感じに変えます。

HTML
CSS

HTML

<body>
    <ul>
      <li>リストです</li>
      <li>リストです</li>
      <li>リストです</li>
      <li>リストです</li>
    </ul>
  </body>

CSS

ul{
  list-style: none;
  

}

li{

  display: block;
}

li::before{
  content: "";

	 width: 8px;
	 height: 8px;
	 border: 2px solid black;
	 border-radius: 50%;
	 display: inline-block;
}

ul{list-style:none;}で、初期設定の黒丸を消します。

::before（疑似要素）を使い、borderをborder-radiusで５０％に丸めて白抜き丸を形成します。

borderのpxや、colorを変更することで見た目を変えられます。

ちなみに、このul{list-style:none;}が効かない場合、liにdisplay:block;をつけると消えますよ！

ぜひおためしあれ(*^^)v