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

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

①(①)をcontent用に書き換える

①
↓
\02460

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

---

style.css

.maru::before {
content: '\02460';
}

index.html

<span class="maru"></span>
=> ①

丸数字

<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>

表示	文字実体参照	数値文字参照
		10進	16進 contentに使う値
①		①	\02460
②		②	\02461
③		③	\02462
④		④	\02463
⑤		⑤	\02464
⑥		⑥	\02465
⑦		⑦	\02466
⑧		⑧	\02467
⑨		⑨	\02468
⑩		⑩	\02469

その他特殊文字

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

丸枠のその他実装方法

CSSで作るリストデザイン38選！オシャレな箇条書きを実現
【CSS】olのリストで①、②、③（丸数字）を表示させる
CSSでリストを素敵にするlist-styleの使い方+もっと自由な作り方

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

特殊文字一覧

使いたいときの HTML特殊文字 & 機種依存文字

擬似要素と擬似クラス

擬似要素と擬似クラスの違いとは？ :before,:afterと::before,::afterのコロンの数はなぜ違う？

反映されなかった

CSS - list-style-type