::first-line

概要

テキストの最初の行にのみスタイルを適用する擬似要素です。ビューポートの幅によって最初の行の範囲が動的に変化するため、レスポンシブに対応した行レベルのスタイリングが可能です。適用可能なプロパティはfont、color、background、word-spacing、letter-spacingなどに限定されています。

対応ブラウザ

基本構文

article p::first-line {
  font-weight: bold;
  font-size: 1.1em;
  color: #1e3a5f;
}

実務での使いどころ

• リード文の視覚的強調

  記事の冒頭段落の最初の行を太字・色付きにし、読者の注目を集めるリード文スタイルを適用します。

注意点

アクセシビリティ

• ::first-lineによるスタイル変更はスクリーンリーダーに影響しませんが、色のみで情報を伝えないよう注意してください。

参考リンク

• MDN Web Docs — ::first-line
• Can I use — ::first-line