テキストの１行目だけスタイルを当てたいとき、どのように実装しますか？
spanで囲って個別にクラスをつけるよりもスマートな方法があるので紹介します。
もくじ
::first-lineは、CSSの疑似要素の一つで、ブロックレベルの要素が表示するテキストの最初の行にスタイルを特別に適用するために使用されます。この疑似要素は、段落の最初の行や、ブロック・コンテナに含まれるテキストの最初の行の見た目を変えたい場合に役立ちます。
See the Pen Untitled by toshihide (@toshihide2000) on CodePen.
::first-line疑似要素は、すべてのCSSプロパティをサポートしているわけではありません。一般的に、フォント、色、背景、ワード/レタースペーシング、テキスト装飾などのプロパティのみが使用できます。marginやpaddingは::first-lineには適用できません。
::first-lineに適用できるプロパティ- フォントに関する全プロパティ:
font,font-kerning,font-style,font-variant,font-variant-numeric,font-variant-position,font-variant-east-asian,font-variant-caps,font-variant-alternates,font-variant-ligatures,font-synthesis,font-feature-settings,font-language-override,font-weight,font-size,font-size-adjust,font-stretch,font-family - 背景に関する全プロパティ:
background-color,background-clip,background-image,background-origin,background-position,background-repeat,background-size,background-attachment,background-blend-mode colorプロパティword-spacing,letter-spacing,text-decoration,text-transform,line-heighttext-shadow,text-decoration,text-decoration-color,text-decoration-line,text-decoration-style,vertical-align
::first-lineは、ブロックコンテナに対してのみ適用されます。インライン要素や空の要素には適用されません。::first-line疑似要素は、要素の実際の最初の行のみに影響を及ぼし、その要素が何行にわたって表示されても、最初の行だけがスタイルを受け取ります。要素の内容が変化し、最初の行のテキストが変わった場合（例えば、ウィンドウのリサイズによる折り返しの変更）、::first-lineのスタイルも適用される行が変わります。
えんどう
HTML上の最初の行ではなく、実際に表示される最初の行に対して適用されます
