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";

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

特殊文字一覧サイト

まとめ

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

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

thumb_css

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

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

このブログサイトが参考になった人は、いいねボタン! 更新情報も受け取れます!

arrow
デル株式会社
  • Pocket
  • このエントリーをはてなブックマークに追加

キヨタツ

キヨタツ

WEBを中心に、色々な制作をする個人事業主です。過去、エンジニア&webディレクターで会社勤めをしていました。主に要件定義や構築が得意で、HTML/css/javascript/PHP/git/wordpress/MT/DB/photoshop/illustrator/fireworksなど扱えます。現在、サーバー・アプリなどを習得中です。性格は、自虐好きです。