【CSS】擬似要素 first-lineとfirst-letter

first-lineは最初の一行だけにスタイルを適用するときに使います。first-letterは段落の先頭の一文字だけにスタイルを指定します。

first-line：「最初の1行」実装

要素名：first-line

 p.sample {
	width:100%;
	line-height:2.5em; }
 p.sample:first-line {
	 font-size: 2.5em;
	 font-weight: bold;
	 background-color:#ccc; }

first-lineは最初の一行だけにスタイルを適用するときに使います。first-letterははじめの一文字だけにスタイルを指定します。

first-line疑似要素はウインドウサイズに変更があった場合は、1行目の横幅が変化すれば、それに合わせて適用範囲が変わります。それによって自動的に、「装飾されている1行目」も変わります。

first-letter:「先頭の1文字」のみ装飾

要素名：first-letter

 p.sample1 {
	width:100%;
	line-height:2.5em; }
 p.sample1:first-letter {
    color: white;
	font-weight: bold;
	background-color:#ccc; }

最初の一行だけにスタイルを適用するときにfirst-lineを使います。first-letterははじめの一文字だけにスタイルを指定します。