及川WEB室|ホームページ制作

HTML、CSS、JavaScript、スマートフォンサイト、Facebookなど、サイト制作に関する事をメモしています。
個人的な備忘録です。
及川WEB室 ホームページ制作HOME
及川WEB室 > CSS > 疑似要素:beforeや:afterのcontentで記号(特殊文字)などを表示する方法

疑似要素:beforeや:afterのcontentで記号(特殊文字)などを表示する方法。コード表やシミュレーター有り

2017/03/10
CSS の疑似要素 :before や :after の content プロパティの値にコードを入れて、特殊文字を表示することができる。
ただ、特殊文字のコードをそのまま記述するのではなく、コードは16進数に書き換えてからcontentプロパティの値に記述する必要がある。

また、改行や空白は少し注意が必要。
content で改行や空白を表示する方法についてはこちら »

content用の書式

特殊文字のコードを、content プロパティの値にするには、下記のように書き換える。
「&#△△△;」→「¥0▲▲▲」 (△△△は十進数の数値、▲▲▲は十六進数の数値)
記号「»」の場合…「»」→「¥0bb」

書き換える内容は下記。
・「&」→「¥」
・「#」→「0」(←数字のゼロ)
・数字は「10進数」→「16進数」
・最後のセミコロン「;」は省略。

サンプル(例)

:before に記号「«」を表示。
(記号「«」…文字実体参照「«」、数値文字参照:10進「«」・16進「¥0ab」)

:after に記号「»」を表示。
(記号「»」…文字実体参照「»」、数値文字参照:10進「»」・16進「¥0bb」)

CSS
div.test:before {content:"\0ab";}
div.test:after {content:"\0bb";}
HTML
サンプル
表示
サンプル

contentの表示テスト

contnt シミュレーター」で、contentの表示確認(シミュレーション)ができます。

content シミュレーター

●contentの値 (例:\0ab)
⇓⇓ 結果 ⇓⇓

●CSS (↓ここにCSSのコードが表示されます。)
●HTML
<div class="mycontent"></div>
●ブラウザ上での表示 (例:«)
  1. 「●contentの値」にコードを入力し、[表示]ボタンをクリック。
  2. ※コードは、後述の「content で使える特殊文字コード表」を参照
    ※スマートフォンなどで半角円記号(¥)を入力しても、きちんと表示されない場合があります。その場合、円記号(¥)の代わりにバックスラッシュ(バックスラッシュ 記号)を使用してください。
  3. 「●サンプルCSS」に、:beforeにcontentを設定したCSSが表示されます。
  4. 「●表示」で実際の表示を確認できます。
    ※「●表示」の枠のHTML→ <div class="mycontent" ></div>

content で使える特殊文字コード表

contentの値には、数字が16進数になっているコード(下の表の「contentに使う値」)を使用して下さい。
表示 文字実体参照 数値文字参照
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
  &#9312; \02460
  &#9313; \02461
  &#9314; \02462
  &#9315; \02463
  &#9316; \02464
  &#9317; \02465
  &#9318; \02466
  &#9319; \02467
  &#9320; \02468
  &#9321; \02469
  &#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
表示 文字実体参照 10進 16進
contentに使う値
contentシミュレーターで表示を確認できます。
contentシミュレーター
MENU Ξ