以下の内容を書き換える。
①(①)を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>
=> ①
丸数字
| 表示 | 文字実体参照 | 数値文字参照 | |
|---|---|---|---|
| 10進 | 16進 contentに使う値 |
||
| ① | ① | \02460 | |
| ② | ② | \02461 | |
| ③ | ③ | \02462 | |
| ④ | ④ | \02463 | |
| ⑤ | ⑤ | \02464 | |
| ⑥ | ⑥ | \02465 | |
| ⑦ | ⑦ | \02466 | |
| ⑧ | ⑧ | \02467 | |
| ⑨ | ⑨ | \02468 | |
| ⑩ | ⑩ | \02469 | |
| ❶ | ❶ | \02776 | |
| ❷ | ❷ | \02777 | |
| ❸ | ❸ | \02778 | |
| ❹ | ❹ | \02779 | |
| ❺ | ❺ | \0277a | |
| ❻ | ❻ | \0277b | |
| ❼ | ❼ | \0277c | |
| ❽ | ❽ | \0277d | |
| ❾ | ❾ | \0277e | |
| ❿ | ❿ | \0277f | |
| ⓫ | ⓫ | \024eb | |
| ⓬ | ⓬ | \024ec | |
その他特殊文字
| 表示 | 文字実体参照 | 数値文字参照 | |
|---|---|---|---|
| 10進 | 16進 contentに使う値 |
||
| « | « | « | \0ab |
| » | » | » | \0bb |
| < | < | < | \03c |
| > | > | > | \03e |
| ∧ | ∧ | ∧ | \02227 |
| ∨ | ∨ | ∨ | \02228 |
| Ξ | Ξ | Ξ | \039e |
| × | × | × | \0d7 |
| ← | ← | ← | \02190 |
| ↑ | ↑ | ↑ | \02191 |
| → | → | → | \02192 |
| ↓ | ↓ | ↓ | \02193 |
| ¥ | ¥ | ¥ | \0a5 |
| © | © | © | \0a9 |
| ® | ® | ® | \0ae |
| ▲ | ▲ | \025b2 | |
| ▼ | ▼ | \025bc | |
| ▶ | ▶ | \025b6 | |
| ◀ | ◀ | \025c0 | |
| △ | △ | \025b3 | |
| ▽ | ▽ | \025bd | |
| ▷ | ▷ | \025b7 | |
| ◁ | ◁ | \025c1 | |
| ■ | ■ | \025a0 | |
| □ | □ | \025a1 | |
| ◆ | ◆ | \025c6 | |
| ◇ | ◇ | \025c7 | |
| ○ | ○ | \025cb | |
| ◎ | ◎ | \025ce | |
| ● | ● | \025cf | |
| • | • | • | \02022 |
| ❇ | ❇ | \02747 | |
| ❈ | ❈ | \02748 | |
| ❉ | ❉ | \02749 | |
| ❊ | ❊ | \0274a | |
| ❋ | ❋ | \0274b | |
| ♠ | ♠ | ♠ | \02660 |
| ♣ | ♣ | ♣ | \02663 |
| ♥ | ♥ | ♥ | \02665 |
| ♦ | ♦ | ♦ | \02666 |
| ♤ | ♤ | \02664 | |
| ♧ | ♧ | \02667 | |
| ♡ | ♡ | \02661 | |
| ♢ | ♢ | \02662 | |
| ♨ | ♨ | \02668 | |
| ℃ | ℃ | \02103 | |
| ℓ | ℓ | \02113 | |
| ∴ | ∴ | ∴ | \02234 |
| ∵ | ∵ | \02235 | |
| ¤ | ¤ | ¤ | \0A4 |
| & | & | & | \026 |
| 〒 | 〒 | \03012 | |
| Ⅰ | Ⅰ | \02160 | |
| Ⅱ | Ⅱ | \02161 | |
| Ⅲ | Ⅲ | \02162 | |
| Ⅳ | Ⅳ | \02163 | |
| Ⅴ | Ⅴ | \02164 | |
| Ⅵ | Ⅵ | \02165 | |
| Ⅶ | Ⅶ | \02166 | |
| Ⅷ | Ⅷ | \02167 | |
| Ⅸ | Ⅸ | \02168 | |
| Ⅹ | Ⅹ | \02169 | |
| ㎠ | ㎠ | \033a0 | |
| ㎡ | ㎡ | \033a1 | |
| ✓ | ✓ | \02713 | |
| ✔ | ✔ | \02714 | |
| ✕ | ✕ | \02715 | |
丸枠のその他実装方法
CSSで作るリストデザイン38選！オシャレな箇条書きを実現
【CSS】olのリストで①、②、③（丸数字）を表示させる
CSSでリストを素敵にするlist-styleの使い方+もっと自由な作り方
今回の記事はプロジェクトの都合上の実装です。
本来なら丸数字が自動で繰り上がっていくようにするのがベスト👍
特殊文字一覧
擬似要素と擬似クラス
擬似要素と擬似クラスの違いとは？ :before,:afterと::before,::afterのコロンの数はなぜ違う？