文字列の最初の1文字だけ、特定のスタイルを適用したいときはcssの::first-letterを使えば楽ちん。
たとえばpタグの中とか。
p::first-letter {
font-size: var(--font-size-36);
font-weight: var(--font-weight-bold);
color: var(--text-accent);
line-height: 0.8;
}さらに、first-of-typeなんかとも組み合わせできる。CMSだと、複数のpタグ入りの文字情報を受け取ったりして、そんなときに全体を通して最初の1文字を変えたいときなんかこっちの設定がよい。
p:first-of-type::first-letter {
font-size: var(--font-size-36);
font-weight: var(--font-weight-bold);
color: var(--text-accent);
line-height: 0.8;
}まさか、そんな設定ないだろうと思ったけどあった。