Quantcast
Channel: CSSタグが付けられた新着記事 - Qiita
Viewing all articles
Browse latest Browse all 8716

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

$
0
0

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

1.「&」→「\」(windowsは「¥」)
2.「#」→「0」(←数字のゼロ)
3. 数字は「10進数」→「16進数」参考→10進数←→16進数変換プログラム
4. 最後のセミコロン「;」は省略。

①(①)をcontent用に書き換える
①=>\02460

style.css
.maru:before{content:'\02460';}
index.html
<spanclass="maru"></span>
=> ①

丸数字

表示文字実体参照数値文字参照
10進16進
contentに使う値
 &#9312;\02460
 &#9313;\02461
 &#9314;\02462
 &#9315;\02463
 &#9316;\02464
 &#9317;\02465
 &#9318;\02466
 &#9319;\02467
 &#9320;\02468
 &#9321;\02469
 &#10102;\02776
 &#10103;\02777
 &#10104;\02778
 &#10105;\02779
 &#10106;\0277a
 &#10107;\0277b
 &#10108;\0277c
 &#10109;\0277d
 &#10110;\0277e
 &#10111;\0277f
 &#9451;\024eb
 &#9452;\024ec

その他特殊文字

表示文字実体参照数値文字参照
10進16進
contentに使う値
«&laquo;&#171;\0ab
»&raquo;&#187;\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特殊文字 & 機種依存文字


Viewing all articles
Browse latest Browse all 8716

Latest Images

Trending Articles

<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>