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

web制作

※本記事は作成日より一年以上が経過しています。最新の情報ではないので、ご注意ください。

読了の目安時間: 045

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

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

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

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

content: "\0XXXX";

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

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

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

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

特殊文字一覧サイト

まとめ

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

今読んだ記事をシェアする

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

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

本ブログを気に入って頂けたら、facebookの「いいね!」を是非!

arrow