frontendmemo

このサイトは、「html、css、js、ruby,ツールなどについて、自分が覚えたこと、またはいつも忘れて調べることを書き溜め、それが結果といて勉強したての初心者の方や自分と同じような技術レベルの人の助けになることを目的とするWebログ」、略してブログです。挨拶→http://frontendmemo.hatenablog.com/entry/2016/06/25/115845

iosで疑似要素の機種依存テキストに色を付ける方法

スポンサードリンク


スポンサードリンク


疑似要素に機種依存文字を入れる場合iosで確認すると色がつかないので注意が必要です。

例えば下記では疑似要素に✔(チェックマーク)をいれていますが、通常色は黒文字、対策後に色が変わります。


See the Pen
YzKZrdj
by funclur (@funclur)
on CodePen.

本来意味のあるアイコンなので画像にして「チェック」などのaltを入れるほうが適切です。
もしくはiconfontなどの方が機種依存がないので理想です。

ですが、やむを得ない場合など上記の通り機種依存に色をつけたい場合の解決策を解説します。

解決策

解決策は下記になります。

content: '✔\fe0e';

つまり、機種依存文字のあとに\fe0eを入れることで色の変化が可能です。

基本的にアイコンは画像やiconfontを使用し、やむを得ない場合上記のように\fe0eを付けてみてください。