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

MARKLEAPS

2022.07.11

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

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

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

・html

<p>あっという間に</p>

1	<p>あっという間に</p>

・css

p::first-letter {
	font-size: 4rem;
	color: #379AD6;
}

p::first-letter {

font-size: 4rem;

color: #379AD6;

}

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

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

・html

<p>あっという間に<br />すぐに出来る</p>

1	<p>あっという間に<br />すぐに出来る</p>

・css

p::first-line {
	font-size: 4rem;
	color: #379AD6;
}

p::first-line {

font-size: 4rem;

color: #379AD6;

}

CSS

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