箇条書きのマーカーに丸数字を表示する方法を解説！

箇条書きを表すol要素とそのアイテムのli要素を使って順序指定ありの箇条書きを作る事が出来ます。サンプルコードとしては下記のようになります。

上記のサンプルコードのように、ol要素はデフォルトでは1.2.3..と箇条書きのマーカーには数字が付きます。

しかし、でこの箇条書きのマーカーの指定には丸数字である①、②、③の指定はありません。この丸数字は一般的な文章でよく使われる方も多いので丸数字をマーカーにしたいという方も多いかと思います。
（特に私は利用規約やプライバシーポリシーの文章で多様します）

今回はol要素とli要素の箇条書きでリストもマーカーを丸数字にする方法解説します。

箇条書きのマーカーに丸数字を表示する方法としてはいくつかやり方があります。

それこそマーカーを表示せずに、愚直に①、②、③と箇条書きのテキストに書けば表示はされますが、本題の趣旨とは逸れるため今回は紹介しません。

今回はCSSの

• counter-reset
• counter-increment

上記のサンプルコードではデフォルトのマーカーは非表示にし、その代わりにbeforeの疑似要素でマーカーの見た目を作っています。

その中でcounter-incrementのプロパティは要素の連番の値を加算するプロパティで、その連番の値はCSSの関数のcounterで取得出来ます。
（counter-resetは連番の値を文字通りリセットするプロパティです。）

今はcircle-counterという独自で作ったカウンターの値を取得してcontentプロパティで要素の中身に指定しています。

あとはその見た目をborderプロパティなどを使って丸数字に近づければ丸数字のマーカーとなります。