疑似要素:first-letterと全角記号

CSSの疑似要素である「first-letter」

要素の「最初の文字」を指定する役割があります。

要素名:first-letter {プロパティ名:値;} で指定します。


p:first-letter {

    color:red;

}

と指定すると、pタグの最初の1文字が赤文字になるはずです。

1文字目というのが注意点

※こういう場合はどうでしょう?

全角であっても先頭の「・」「※」「.」などは文字ではなく記号なので、first-letter が2文字目まで適用される。(正常な仕様)なのでこの場合は「※こ」までスタイルが効いてしまいます。

2文字目も記号にしたらどうなるか?

二文字目も記号にすると、最初にくる「文字直前まで」は first-letter と認識します。

A:浪費するのを楽しんだ時間は、浪費された時間ではない。

このような場合は最初に来る文字が「浪」なので「A:」まで first-letter が適用される。(正常な仕様)

FireFoxのみの挙動

FireFoxのみ一部の全角記号「●◆■★等」をfirst-letter で認識できないバグがあります。

●などを先頭に使うと、first-letterで指定する事ができません。2文字目まで適用ではなく、なにも適用されません。

 

少し癖のある疑似要素ですが、行頭が記号の場合は思うような挙動にならないので、違う指定方法が良いかもしれませんね。簡単にいくならclass付きの<span></span>で囲ってスタイル指定する方が楽な場合があるかも。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

3 + sixteen =