【CSS】最初の1文字にスタイルを適用する【備忘録】

こんにちは、ワタナベです！

色んな事があった1(;’∀’)月ももうすぐ終わりです。早い(;’∀’)

今回は「::first-letter」の備忘録。

「::first-letter」とは、ブロックレベル要素のテキストの最初の１文字にスタイルを適用するCSSの疑似要素です。
1文字目だけ色や大きさを変えたい時に便利です。

SAMPLE

See the Pen
Untitled by Akiho (@wcaotdaenpaebne)
on CodePen.

↑上の例では、2番目スタイルが適用されていませんね？
2番目のテキストはspanに対して「::first-letter」を設定しています。spanはインライン要素のためそのままでは適用されません。

インライン要素で使用したい場合は、3番目のテキストのようにインライン要素をブロックレベル要素にしてあげましょう。
3番目は「span」に「display:inline-block」を設定しています。

また、特殊な記号等が文頭にある場合、挙動が特殊になります。
記号を文頭に持ってくる場合は「::first-letter」ではなく別の方法をオススメします。

3点リーダーを表示させる「display: -webkit-box;」を併用したら「::first-letter」が適用されなくなってしまったので、ちょっと詳しく調べてみました。
この時はテキストを「span」で囲み「span」に3点リーダーのスタイルを設定し、解決できました。
今まで何か便利なものとしてふわーっとした感じで使用していたので、インライン要素には使えないのだな～と心に留めておきたいと思います(´ー｀)

▼THANKS！