擬似要素で特殊文字・機種依存文字を表示させる場合

Css

こんにちは。
先日会社で::beforeや::afterの擬似要素のcontent内に►や※が使用されており、テストサーバーでは表示されていたのですが、本番サーバーでは文字化けを起こすという事態が発生しました…。
多分今後も出て来ることが多いことなので、備忘録としてメモしておきます。

擬似要素って?

擬似要素とはなんなのかをまず説明しておきますね!

HTML

<p>最新情報</p>

CSS

p::before {
  content: 更新!
}

これをブラウザで表示させると、

表示結果

更新!最新情報

となります。
こんな感じで、::beforeを記述した各要素の前に、content内で記述したものを挿入することが出来るんです(便利!)。
ただ冒頭にも書きましたように特殊文字や機種依存文字を入れてしまうとうまく表示してくれないのでブラウザが読めるように書き直す必要があります。

手順

  • 変換する文字列は16進数で数値文字参照をする
  • &#を\0に変更
  • 数字を16進数に変換
  • 末尾のセミコロンは不要

んん〜〜〜〜〜〜、ちょっとわかりづらいですよね。各項目説明してみます。

変換する文字列は16進数で数値文字参照をする

こちらのサイトを見て頂くと特殊文字に対応する文字列がわかると思います。
まずは表示させたい記号に対応する文字列をここで参照しましょう。

&#を

&#を\0に変更・数字を16進数に変換

に変更・数字を16進数に変換

例えば►だと”&#9658″になってますよね。
それの&#を\0に変更します。
さらに9654を16進数に変換すると25b6になりますので、最終的に\025b6となります。

この文字列をcontent内に入れてあげるとうまくブラウザで表示される、というわけです。

ちょっと手順が多く面倒な作業を1クッション挟まないといけませんが、文字化けを防ぐためなので慣れて行きたいと思います^^;
下記サイトさまも参考になりますので、是非目を通しておくとさらに理解が深まると思います!

参考サイト

擬似要素[::before]や[::after]にて特殊文字・機種依存文字を表示する方法
疑似要素:beforeや:afterのcontentで記号(特殊文字)などを表示する方法。コード表やシミュレーター有り

コメント