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>で囲ってスタイル指定する方が楽な場合があるかも。
コメントを残す