MARKLEAPS[マークリープス]

TECH BLOG

マークリープス技術ブログ

open

cssで1文字目、1行目にスタイルを適用する方法

MARKLEAPS

cssで要素の1文字目、1行目にスタイルを適用する方法をまとめました。

要素の1文字目にスタイルを適用する

擬似要素「::first-letter」を使用します。

「::first-letter」

・ブロックレベル要素の最初の文字にスタイルを適用します。
・インライン要素には適用できません。
・インライン要素に対して、「display: block;」「display: inline-block;」を指定することで、インライン要素に対しても適用できます。

 

・html

 

・css

 

要素の1行目にスタイルを適用する

擬似要素「::first-line」を使用します。

「::first-line」

・ブロックレベル要素の1行目にスタイルを適用します。
・インライン要素には適用できません。
・インライン要素に対して、「display: block;」「display: inline-block;」を指定することで、インライン要素に対しても適用できます。

 

・html

 

・css

 

よく読まれている関連記事

関連最新記事