::first-line (:first-line)

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

* Some parts of this feature may have varying levels of support.

::first-line は CSS の擬似要素で、ブロックレベル要素の最初の行にスタイルを適用します。なお、最初の行の長さは要素の幅、文書の幅、文字列のフォントの大きさなど、様々な要因に左右されます。

css
/* <p> の最初の行を選択 */
p::first-line {
  color: red;
}

試してみましょう

p::first-line {
  font-size: 1.2rem;
  font-weight: bold;
  text-decoration: underline;
}

<p>
  In warm ocean waters around the world, you may see a strange sight: A fish
  leaping from the water and soaring dozens of meters before returning to the
  ocean's depths. Early Mediterranean sailors thought these flying fish returned
  to the shore at night to sleep, and therefore called this family of marine
  fish Exocoetidae.
</p>

メモ: CSS3 では ::first-line という (二重コロン付き) 表記が、擬似クラスと擬似要素を見分けやすくするために導入されました。ブラウザーでは CSS2 で導入された :first-line も使用できます。

利用可能なプロパティ

::first-line 擬似要素では、一部の CSS プロパティのみが利用できます。

構文

Error: could not find syntax for this item

例

HTML

html
<p>
  スタイルはこの段落の最初の行にのみ適用されます。
  その後のすべての文字列は普通のスタイルになります。分かりますか？
</p>

<span
  >ブロックレベル要素ではないので、この文字列の最初の行は、
  特殊なスタイルになりません。</span
>

CSS

css
::first-line {
  color: blue;
  text-transform: uppercase;

  /* 警告: これらを使用しないでください */
  /* ::first-line 擬似要素では多くのプロパティが無効になります */
  margin-left: 20px;
  text-indent: 20px;
}

結果

仕様書

Specification
CSS Pseudo-Elements Module Level 4
# first-line-pseudo

ブラウザーの互換性

BCD tables only load in the browser

関連情報