::first-letter【先頭文字】擬似要素
::first-line【先頭行】擬似要素

メモ 外部リンク 構文 例

メモ

  • 先頭文字に適用する擬似要素
    • 以下のブロック要素内で適用 (display【表示形式】プロパティ)
    • block
    • list-item
    • table-cell
    • table-caption
    • inline-block
  • 先頭行に適用する擬似要素
    • 以下のブロック要素内で適用 (display【表示形式】プロパティ)
    • block
    • inline-block
    • table-caption
    • table-cell
  • 要素については、HTML5 リファレンス メモ 参照

構文

構文説明
E::first-letter  { スタイル定義 }
E:first-letter   { スタイル定義 } 		E要素の内容の先頭文字に適用
E::first-line  { スタイル定義 }
E:first-line   { スタイル定義 } 		E要素の内容の先頭行に適用

例


<style>
.ex::first-letter { font-size: 200%; }
.ex::first-line { color: red; }
</style>

<p class="ex">The quick brown fox<br> jumps over<br> the lazy dog.</p>

The quick brown fox
jumps over
the lazy dog.