疑似要素::beforeや::afterのcontentで丸数字（特殊文字）を表示する方法

## 以下の内容を書き換える。

```css:①(&amp;#9312;)をcontent用に書き換える
&#9312;
↓
\02460
```

1.「&」→「\」(windowsは「¥」)
2.「#」→「0」（←数字のゼロ）
3. 数字は「10進数」→「16進数」/ 参考→[2進数、8進数、10進数、16進数相互変換ツール](https://hogehoge.tk/tool/number.html)
4. 最後のセミコロン「;」は省略。

---
```css:style.css
.maru::before {
content: '\02460';
}
```

```html:index.html
<span class="maru"></span>
=> ①
```

## 丸数字
<table border="1" class="css_content_table">
  <tbody>
    <tr>
      <th rowspan="2">表示</th>
      <th rowspan="2">文字実体参照</th>
      <th colspan="2">数値文字参照</th>
    </tr>
    <tr>
      <th>10進</th>
      <th>16進<br> contentに使う値</th>
    </tr>
    <tr>
      <td>①</td>
      <td>&nbsp;</td>
      <td>&amp;#9312;</td>
      <td>\02460</td>
    </tr>
    <tr>
      <td>②</td>
      <td>&nbsp;</td>
      <td>&amp;#9313;</td>
      <td>\02461</td>
    </tr>
    <tr>
      <td>③</td>
      <td>&nbsp;</td>
      <td>&amp;#9314;</td>
      <td>\02462</td>
    </tr>
    <tr>
      <td>④</td>
      <td>&nbsp;</td>
      <td>&amp;#9315;</td>
      <td>\02463</td>
    </tr>
    <tr>
      <td>⑤</td>
      <td>&nbsp;</td>
      <td>&amp;#9316;</td>
      <td>\02464</td>
    </tr>
    <tr>
      <td>⑥</td>
      <td>&nbsp;</td>
      <td>&amp;#9317;</td>
      <td>\02465</td>
    </tr>
    <tr>
      <td>⑦</td>
      <td>&nbsp;</td>
      <td>&amp;#9318;</td>
      <td>\02466</td>
    </tr>
    <tr>
      <td>⑧</td>
      <td>&nbsp;</td>
      <td>&amp;#9319;</td>
      <td>\02467</td>
    </tr>
    <tr>
      <td>⑨</td>
      <td>&nbsp;</td>
      <td>&amp;#9320;</td>
      <td>\02468</td>
    </tr>
    <tr>
      <td>⑩</td>
      <td>&nbsp;</td>
      <td>&amp;#9321;</td>
      <td>\02469</td>
    </tr>

    <tr>
      <td>❶</td>
      <td>&nbsp;</td>
      <td>&amp;#10102;</td>
      <td>\02776</td>
    </tr>
    <tr>
      <td>❷</td>
      <td>&nbsp;</td>
      <td>&amp;#10103;</td>
      <td>\02777</td>
    </tr>
    <tr>
      <td>❸</td>
      <td>&nbsp;</td>
      <td>&amp;#10104;</td>
      <td>\02778</td>
    </tr>
    <tr>
      <td>❹</td>
      <td>&nbsp;</td>
      <td>&amp;#10105;</td>
      <td>\02779</td>
    </tr>
    <tr>
      <td>❺</td>
      <td>&nbsp;</td>
      <td>&amp;#10106;</td>
      <td>\0277a</td>
    </tr>
    <tr>
      <td>❻</td>
      <td>&nbsp;</td>
      <td>&amp;#10107;</td>
      <td>\0277b</td>
    </tr>
    <tr>
      <td>❼</td>
      <td>&nbsp;</td>
      <td>&amp;#10108;</td>
      <td>\0277c</td>
    </tr>
    <tr>
      <td>❽</td>
      <td>&nbsp;</td>
      <td>&amp;#10109;</td>
      <td>\0277d</td>
    </tr>
    <tr>
      <td>❾</td>
      <td>&nbsp;</td>
      <td>&amp;#10110;</td>
      <td>\0277e</td>
    </tr>
    <tr>
      <td>❿</td>
      <td>&nbsp;</td>
      <td>&amp;#10111;</td>
      <td>\0277f</td>
    </tr>

    <tr>
      <td>⓫</td>
      <td>&nbsp;</td>
      <td>&amp;#9451;</td>
      <td>\024eb</td>
    </tr>
    <tr>
      <td>⓬</td>
      <td>&nbsp;</td>
      <td>&amp;#9452;</td>
      <td>\024ec</td>
    </tr>

  </tbody>
</table>




## その他特殊文字

<table border="1" class="css_content_table">
  <tbody>
    <tr>
      <th rowspan="2">表示</th>
      <th rowspan="2">文字実体参照</th>
      <th colspan="2">数値文字参照</th>
    </tr>
    <tr>
      <th>10進</th>
      <th>16進<br> contentに使う値</th>
    </tr>
    <tr>
      <td>«</td>
      <td>&amp;laquo;</td>
      <td>&amp;#171;</td>
      <td>\0ab</td>
    </tr>
    <tr>
      <td>»</td>
      <td>&amp;raquo;</td>
      <td>&amp;#187;</td>
      <td>\0bb</td>
    </tr>
    <tr>
      <td>&lt;</td>
      <td>&amp;lt;</td>
      <td>&amp;#60;</td>
      <td>\03c</td>
    </tr>
    <tr> </tr>
    <tr>
      <td>&gt;</td>
      <td>&amp;gt;</td>
      <td>&amp;#62;</td>
      <td>\03e</td>
    </tr>
    <tr>
      <td>∧</td>
      <td>&amp;and;</td>
      <td>&amp;#8743;</td>
      <td>\02227</td>
    </tr>
    <tr>
      <td>∨</td>
      <td>&amp;or;</td>
      <td>&amp;#8744;</td>
      <td>\02228</td>
    </tr>
    <tr> </tr>
    <tr> </tr>
    <tr>
      <td>Ξ</td>
      <td>&amp;Xi;</td>
      <td>&amp;#926;</td>
      <td>\039e</td>
    </tr>
    <tr>
      <td>×</td>
      <td>&amp;times;</td>
      <td>&amp;#215;</td>
      <td>\0d7</td>
    </tr>
    <tr>
      <td>←</td>
      <td>&amp;larr;</td>
      <td>&amp;#8592;</td>
      <td>\02190</td>
    </tr>
    <tr>
      <td>↑</td>
      <td>&amp;uarr;</td>
      <td>&amp;#8593;</td>
      <td>\02191</td>
    </tr>
    <tr>
      <td>→</td>
      <td>&amp;rarr;</td>
      <td>&amp;#8594;</td>
      <td>\02192</td>
    </tr>
    <tr>
      <td>↓</td>
      <td>&amp;darr;</td>
      <td>&amp;#8595;</td>
      <td>\02193</td>
    </tr>
    <tr>
      <td>¥</td>
      <td>&amp;yen;</td>
      <td>&amp;#165;</td>
      <td>\0a5</td>
    </tr>
    <tr>
      <td>©</td>
      <td>&amp;copy;</td>
      <td>&amp;#169;</td>
      <td>\0a9</td>
    </tr>
    <tr>
      <td>®</td>
      <td>&amp;reg;</td>
      <td>&amp;#174;</td>
      <td>\0ae</td>
    </tr>
    <tr>
      <td>▲</td>
      <td>&nbsp;</td>
      <td>&amp;#9650;</td>
      <td>\025b2</td>
    </tr>
    <tr>
      <td>▼</td>
      <td>&nbsp;</td>
      <td>&amp;#9660;</td>
      <td>\025bc</td>
    </tr>
    <tr>
      <td>▶</td>
      <td>&nbsp;</td>
      <td>&amp;#9654;</td>
      <td>\025b6</td>
    </tr>
    <tr>
      <td>◀</td>
      <td>&nbsp;</td>
      <td>&amp;#9664;</td>
      <td>\025c0</td>
    </tr>
    <tr>
      <td>△</td>
      <td>&nbsp;</td>
      <td>&amp;#9651;</td>
      <td>\025b3</td>
    </tr>
    <tr>
      <td>▽</td>
      <td>&nbsp;</td>
      <td>&amp;#9661;</td>
      <td>\025bd</td>
    </tr>
    <tr>
      <td>▷</td>
      <td>&nbsp;</td>
      <td>&amp;#9655;</td>
      <td>\025b7</td>
    </tr>
    <tr>
      <td>◁</td>
      <td>&nbsp;</td>
      <td>&amp;#9665;</td>
      <td>\025c1</td>
    </tr>
    <tr>
      <td>■</td>
      <td>&nbsp;</td>
      <td>&amp;#9632;</td>
      <td>\025a0</td>
    </tr>
    <tr>
      <td>□</td>
      <td>&nbsp;</td>
      <td>&amp;#9633;</td>
      <td>\025a1</td>
    </tr>
    <tr>
      <td>◆</td>
      <td>&nbsp;</td>
      <td>&amp;#9670;</td>
      <td>\025c6</td>
    </tr>
    <tr>
      <td>◇</td>
      <td>&nbsp;</td>
      <td>&amp;#9671;</td>
      <td>\025c7</td>
    </tr>
    <tr>
      <td>○</td>
      <td>&nbsp;</td>
      <td>&amp;#9675;</td>
      <td>\025cb</td>
    </tr>
    <tr>
      <td>◎</td>
      <td>&nbsp;</td>
      <td>&amp;#9678;</td>
      <td>\025ce</td>
    </tr>
    <tr>
      <td>●</td>
      <td>&nbsp;</td>
      <td>&amp;#9679;</td>
      <td>\025cf</td>
    </tr>
    <tr>
      <td>•</td>
      <td>&amp;bull;</td>
      <td>&amp;#8226;</td>
      <td>\02022</td>
    </tr>
    <tr>
      <td>❇</td>
      <td>&nbsp;</td>
      <td>&amp;#10055;</td>
      <td>\02747</td>
    </tr>
    <tr>
      <td>❈</td>
      <td>&nbsp;</td>
      <td>&amp;#10056;</td>
      <td>\02748</td>
    </tr>
    <tr>
      <td>❉</td>
      <td>&nbsp;</td>
      <td>&amp;#10057;</td>
      <td>\02749</td>
    </tr>
    <tr>
      <td>❊</td>
      <td>&nbsp;</td>
      <td>&amp;#10058;</td>
      <td>\0274a</td>
    </tr>
    <tr>
      <td>❋</td>
      <td>&nbsp;</td>
      <td>&amp;#10059;</td>
      <td>\0274b</td>
    </tr>
    <tr>
      <td>♠</td>
      <td>&amp;spades;</td>
      <td>&amp;#9824;</td>
      <td>\02660</td>
    </tr>
    <tr>
      <td>♣</td>
      <td>&amp;clubs;</td>
      <td>&amp;#9827;</td>
      <td>\02663</td>
    </tr>
    <tr>
      <td>♥</td>
      <td>&amp;hearts;</td>
      <td>&amp;#9829;</td>
      <td>\02665</td>
    </tr>
    <tr>
      <td>♦</td>
      <td>&amp;diams;</td>
      <td>&amp;#9830;</td>
      <td>\02666</td>
    </tr>
    <tr>
      <td>♤</td>
      <td>&nbsp;</td>
      <td>&amp;#9828;</td>
      <td>\02664</td>
    </tr>
    <tr>
      <td>♧</td>
      <td>&nbsp;</td>
      <td>&amp;#9831;</td>
      <td>\02667</td>
    </tr>
    <tr>
      <td>♡</td>
      <td>&nbsp;</td>
      <td>&amp;#9825;</td>
      <td>\02661</td>
    </tr>
    <tr>
      <td>♢</td>
      <td>&nbsp;</td>
      <td>&amp;#9826;</td>
      <td>\02662</td>
    </tr>
    <tr>
      <td>♨</td>
      <td>&nbsp;</td>
      <td>&amp;#9832;</td>
      <td>\02668</td>
    </tr>
    <tr>
      <td>℃</td>
      <td>&nbsp;</td>
      <td>&amp;#8451;</td>
      <td>\02103</td>
    </tr>
    <tr>
      <td>ℓ</td>
      <td>&nbsp;</td>
      <td>&amp;#8467;</td>
      <td>\02113</td>
    </tr>
    <tr>
      <td>∴</td>
      <td>&amp;there4;</td>
      <td>&amp;#8756;</td>
      <td>\02234</td>
    </tr>
    <tr>
      <td>∵</td>
      <td>&nbsp;</td>
      <td>&amp;#8757;</td>
      <td>\02235</td>
    </tr>
    <tr>
      <td>¤</td>
      <td>&amp;curren;</td>
      <td>&amp;#164;</td>
      <td>\0A4</td>
    </tr>
    <tr>
      <td>&amp;</td>
      <td>&amp;amp;</td>
      <td>&amp;#38;</td>
      <td>\026</td>
    </tr>
    <tr>
      <td>〒</td>
      <td>&nbsp;</td>
      <td>&amp;#12306;</td>
      <td>\03012</td>
    </tr>
    <tr>
      <td>Ⅰ</td>
      <td>&nbsp;</td>
      <td>&amp;#8544;</td>
      <td>\02160</td>
    </tr>
    <tr>
      <td>Ⅱ</td>
      <td>&nbsp;</td>
      <td>&amp;#8545;</td>
      <td>\02161</td>
    </tr>
    <tr>
      <td>Ⅲ</td>
      <td>&nbsp;</td>
      <td>&amp;#8546;</td>
      <td>\02162</td>
    </tr>
    <tr>
      <td>Ⅳ</td>
      <td>&nbsp;</td>
      <td>&amp;#8547;</td>
      <td>\02163</td>
    </tr>
    <tr>
      <td>Ⅴ</td>
      <td>&nbsp;</td>
      <td>&amp;#8548;</td>
      <td>\02164</td>
    </tr>
    <tr>
      <td>Ⅵ</td>
      <td>&nbsp;</td>
      <td>&amp;#8549;</td>
      <td>\02165</td>
    </tr>
    <tr>
      <td>Ⅶ</td>
      <td>&nbsp;</td>
      <td>&amp;#8550;</td>
      <td>\02166</td>
    </tr>
    <tr>
      <td>Ⅷ</td>
      <td>&nbsp;</td>
      <td>&amp;#8551;</td>
      <td>\02167</td>
    </tr>
    <tr>
      <td>Ⅸ</td>
      <td>&nbsp;</td>
      <td>&amp;#8552;</td>
      <td>\02168</td>
    </tr>
    <tr>
      <td>Ⅹ</td>
      <td>&nbsp;</td>
      <td>&amp;#8553;</td>
      <td>\02169</td>
    </tr>
    <tr>
      <td>㎠</td>
      <td>&nbsp;</td>
      <td>&amp;#13216;</td>
      <td>\033a0</td>
    </tr>
    <tr>
      <td>㎡</td>
      <td>&nbsp;</td>
      <td>&amp;#13217;</td>
      <td>\033a1</td>
    </tr>
    <tr>
      <td>✓</td>
      <td>&nbsp;</td>
      <td>&amp;#10003;</td>
      <td>\02713</td>
    </tr>
    <tr>
      <td>✔</td>
      <td>&nbsp;</td>
      <td>&amp;#10004;</td>
      <td>\02714</td>
    </tr>
    <tr>
      <td>✕</td>
      <td>&nbsp;</td>
      <td>&amp;#10005;</td>
      <td>\02715</td>
    </tr>
  </tbody>
</table>



## 丸枠のその他実装方法

[CSSで作るリストデザイン38選！オシャレな箇条書きを実現](https://www.yuu-diaryblog.com/2017/03/14/list-design/)
[【CSS】olのリストで①、②、③（丸数字）を表示させる](https://125naroom.com/web/2877)
[CSSでリストを素敵にするlist-styleの使い方+もっと自由な作り方](https://www.sejuku.net/blog/56177)

今回の記事はプロジェクトの都合上の実装です。
本来なら丸数字が自動で繰り上がっていくようにするのがベスト👍

## 特殊文字一覧

[使いたいときの HTML特殊文字 & 機種依存文字](https://www.benricho.org/symbol/tokusyu_03_suuji.html)

## 擬似要素と擬似クラス

[擬似要素と擬似クラスの違いとは？ :before,:afterと::before,::afterのコロンの数はなぜ違う？](https://wemo.tech/1450)

## 反映されなかった
[CSS - list-style-type](http://www.tohoho-web.com/css/prop/list-style-type.htm)