CSSのbefore、afterの疑似要素で特殊文字を扱う時の注意点



HTMLとCSSでWebページを構築しているとbefore、afterなどの疑似要素を利用することは多々あります。
その中で時と場合によってはHTMLの特殊文字を使うことがあります。

日本語入力システムからは入力出来ない文字や記号などを使う際、または記号等を使う時に文字コードによって文字化けすることがある場合などには、HTMLで用意されている特殊文字を使うことがあります。
通常、特殊文字は10進数や16進数のコードを利用していくのですがCSSの疑似要素で特殊文字を使う場合、10進数や16進数ではうまくコードが効きません。

ここではCSSの疑似要素で特殊文字を扱う方法をご紹介します。

疑似要素で特殊文字を扱う


疑似要素のbefore、afterはセレクタで指定した要素の前と後に要素を追加する時に使います。普段は見出しの凝ったデザインにする時に疑似要素を利用してCSSでデザインしていったり、またはアイコン画像などを使ったりしますが記号等を利用する場合は注意が必要です。

contentに追加する要素を入れてあげれば良いのですが、特殊文字を使うと10進数や16進数のコードが効きません。そこで疑似要素でも特殊文字が扱えるように編集していきます。

例えば、疑似要素を使って文字列を角括弧（[]）で囲うことがあるとしましょう。

始め角括弧　→　[
終わり角括弧　→　]

こちらの16進数を疑似要素で利用できるように編集します。
ポイントは3つです。

1. & →　バックスラッシュ（ \ ）
2. #とx →　0
3. 最後のセミコロンを削除

サンプルコードでどのような表示になるのか確認してみます。
HTMLはこんな感じにしておきます。

HTML

<section>
  <p>疑似要素で特殊文字を扱う</p>
</section>



今回はpタグを使って説明しますが、h2、h3などの見出しとしても良いでしょう。

CSSでは上記で説明しました編集を行います。
編集前と編集後を比較してみましょう。

CSS（16進数 編集前）

p::before {
  content: '&#x5b;';
  margin: 0 5px 0 0;
}
 
p::after {
  content: '&#x5d;';
  margin: 0 0 0 5px;
}

CSS（16進数 編集後）

p::before {
  content: '\005b';
  margin: 0 5px 0 0;
}
 
p::after {
  content: '\005d';
  margin: 0 0 0 5px;
}



表示は以下のようになります。

CSSの疑似要素で特殊文字を扱う



16進数の編集前はうまく行かなかったですが、編集後ではコードが効いているのがわかります。

今回は角括弧を例に上げましたが、他にも記号などでも疑似要素で特殊文字を扱いたいときがあると思います。
そういった時には今回の編集の方法を使ってみてください。