css疑似要素before・afterのcontentで特殊文字を使う時は10進数を16進数に変換でOK!

web制作

疑似要素のcontentでは、ダブルクォーテーション""の中に入力した文字がそのまま反映されてしまうので、特殊文字を使う時は工夫が必要です。具体的には、16進数に置き換える必要があります。

特殊記号を疑似要素で使うための方法

接頭二文字「&#」を「\0」へ変換する。

まずは、下記のように接頭二文字を置換します。「XXXX」は仮の数字です。
content: "&#XXXX";

content: "\0XXXX";

入力したい特殊文字の数字を10進数→16進数に変換する

たとえば10進数「9632」を表示したい場合、16進数「25A0」へ変換します。

つまり、こう入力すれば「9632」の特殊文字が表示されます。
content: "\025A0";

下記は、参考サイトです。
進数変換サイト

特殊文字一覧サイト

まとめ

とくに考えず、機械的に作業するだけです。

この記事が参考になったら「いいね!」

css疑似要素before・afterのcontentで特殊文字を使う時は10進数を16進数に変換でOK!


SNSのシェアはこちらから!

  • 3
    このエントリーをはてなブックマークに追加
  • Pocket

PROFILE

yoshi

運営者のYoshiと申します。WEB制作は、HTML/css/javascript/PHP/git/wordpress/MT/DB/photoshop/illustrator/fireworksなど扱えます。サーバー・アプリなども習得中。