Widely available YES。主要ブラウザで広く対応済み。本番利用を推奨。

::first-line

::first-line は CSS の擬似要素で、ブロックコンテナーの先頭行にスタイルを適用します。

擬似要素行スタイリング

対応ブラウザ

機能 デスクトップ モバイル
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
:first-line
1
12
1
1
18
1
svg text element

SVG `<text>` 要素のサポート
124
1+対応 (バージョン) 未対応 ※注釈あり サブ機能の解説は MDN Web Docs (CC BY-SA 2.5)
注釈 2件
実装メモ
  • Chrome 62 より前では、`text-transform` プロパティは `::first-line` 擬似要素では機能しません。 バグ 40214861 を参照してください。
対応条件
  • 以前は別名で対応していました: :first-line (1)
注釈 1件
対応条件
  • 以前は別名で対応していました: :first-line (12)
注釈 1件
対応条件
  • 以前は別名で対応していました: :first-line (1)
注釈 2件
実装メモ
  • `text-transform` プロパティは、`::first-line` または `:first-line` 擬似要素に対しては機能しません。 バグ 3409 を参照してください。
対応条件
  • 以前は別名で対応していました: :first-line (1)
注釈 2件
実装メモ
  • Chrome Android 62 より前では、`text-transform` プロパティは `::first-line` 擬似要素では機能しません。 バグ 40214861 を参照してください。
対応条件
  • 以前は別名で対応していました: :first-line (18)
注釈 2件
実装メモ
  • `text-transform` プロパティは、`::first-line` または `:first-line` 擬似要素に対しては機能しません。 バグ 3409 を参照してください。
対応条件
  • 以前は別名で対応していました: :first-line (1)

基本構文

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

ライブデモ

thickcharacter+big

CSS thickcharacter+big demo.

プレビュー全画面表示

Color change

CSS Colorchange demo.

プレビュー全画面表示

capitalization

CSS capitalization demo.

プレビュー全画面表示

実務での使いどころ

  • リード文の視覚的強調

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

注意点

  • 最初の行の範囲はビューポート幅に依存するため、異なる画面サイズで意図したスタイリングになるか確認してください。

アクセシビリティ

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

参考リンク