CSSで記号を実装する

今回は文字の前後に記号を追加したい。 CSSの疑似セレクタ(:before, :after)を使えば要素の前後に値を表示できます。

値を指定するには疑似セレクタのcontentプロパティを使う。 IE7以下は未対応らしいですが、今回は無視しています。

contentプロパティで表示できる項目

• テキスト
• 属性名
• 画像

上記の3つを扱うことができる。 記号を表示するだけであれば、テキストを使う。 その他の使い方に関しては以下の記事がわかりやすい。

tenderfeel.xsrv.jp

テキストの表現方法

• 機種依存文字を使う (©)
• 文字実体参照を使う (©)
• 数値文字参照を使う (\00a9)

機種依存文字はShift_JIS等で文字化けする時があるので、実体参照を使う方が無難 (最近はUTF-8が主流なのであまり気にしなくなってきているらしい)

実体参照について

人にわかりやすい文字で表現されているので使い易いが、 文字実体参照が無い記号も多い(例: ✔) 。この場合はUnicodeの10進数/16進数で表現する数値文字参照を使うしかない。

数値文字参照の調べ方

使いたい記号の数値文字参照を調べるツールも以下の記事に記載されているので、 困ったら見てみると便利だと思います。

tenderfeel.xsrv.jp

サンプルコード

.check-mark:after
  content: "\002714"
  color: red

こんな感じで✔を表示することが出来ます。