css content で機種依存文字を使う。
どんな文字が使われているかってすげーわかりにくい。
しかも、それの一覧探すのが一苦労。
こんな感じで使うよね?
- カリ石鹸素地
- ステアロイルグルタミン酸Na
- ココイルアルギニンエチルPCA
- ココイルグリシンK
- リゾレシチン
- ミリスチン酸
ソース
<ul class="ar8"> <li>カリ石鹸素地</li> <li>ステアロイルグルタミン酸Na</li> <li>ココイルアルギニンエチルPCA</li> <li>ココイルグリシンK</li> <li>リゾレシチン</li> <li>ミリスチン酸</li> </ul> <!--style--> <style> ul.ar8 li { position: relative; } ul.ar8 li::after { display: block; position: absolute; top: .2em; left: -1.2em; font-size: 12px; line-height: 1; } ul.ar8 li:nth-of-type(1)::after { content: '\002660'; color: #3498db; } ul.ar8 li:nth-of-type(2)::after { content: '\002605'; color: #e67e22; } ul.ar8 li:nth-of-type(3)::after { content: '\002665'; color: #e74c3c; } ul.ar8 li:nth-of-type(4)::after { content: '\00272a'; color: #f1c40f; } ul.ar8 li:nth-of-type(5)::after { content: '\002731'; color: #9b59b6; } </style>
こいつの content: ‘\002660’; ってなんだ!ってなる。
一覧乗せときます。 こっちにもかいたけど⇒機種依存文字
見てわかると思うけど、これの 16進数の &# を外して \ つけて前ゼロ6ケタにすればいい。
ただ、見通しが悪くなるからあんまし使わない方がいいと思うの。自己満足の領域
表示例 | 文字実体参照 | 数値文字参照(10進数) | 数値文字参照(16進数) |
---|---|---|---|
© | © | © | © |
® | ® | ® | ® |
™ | ™ | ™ | ™ |
|   |   | |
  |   |   | |
  |   |   | |
" | " | " | " |
& | & | & | & |
< | < | < | < |
> | > | > | > |
« | « | « | « |
» | » | » | » |
← | ← | ← | ← |
↑ | ↑ | ↑ | ↑ |
→ | → | → | → |
↓ | ↓ | ↓ | ↓ |
↔ | ↔ | ↔ | ↔ |
⇐ | ⇐ | Ⅼ | ⇐ |
⇑ | ⇑ | Ⅽ | ⇑ |
⇒ | ⇒ | Ⅾ | ⇒ |
⇓ | ⇓ | Ⅿ | ⇓ |
⇔ | ⇔ | ⅰ | ⇔ |
♠ | ♠ | ♠ | ♠ |
♣ | ♣ | ♣ | ♣ |
♥ | ♥ | ♥ | ♥ |
♦ | ♦ | ♦ | ♦ |
♤ | ♤ | ♤ | |
♧ | ♧ | ♧ | |
♡ | ♡ | ♡ | |
♢ | ♢ | ♢ | |
① | ① | ① | |
② | ② | ② | |
③ | ③ | ③ | |
④ | ④ | ④ | |
⑤ | ⑤ | ⑤ | |
⑥ | ⑥ | ⑥ | |
⑦ | ⑦ | ⑦ | |
⑧ | ⑧ | ⑧ | |
⑨ | ⑨ | ⑨ | |
⑩ | ⑩ | ⑩ | |
⑪ | ⑪ | ⑪ | |
⑫ | ⑫ | ⑫ | |
⑬ | ⑬ | ⑬ | |
⑭ | ⑭ | ⑭ | |
⑮ | ⑮ | ⑮ | |
⑯ | ⑯ | ⑯ | |
⑰ | ⑰ | ⑰ | |
⑱ | ⑱ | ⑱ | |
⑲ | ⑲ | ⑲ | |
⑳ | ⑳ | ⑳ | |
~ | ~ | ~ | |
♨ | ♨ | ♨ |
スポンサーリンク