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

::first-letter

ブロック要素の最初の文字にスタイルを適用する擬似要素です。雑誌やニュースサイトのような装飾的なドロップキャップ（大きな頭文字）を実現できます。適用可能なプロパティはfont、color、margin、padding、border、text-decorationなどに限定されています。

擬似要素テキスト装飾

概要

ブロック要素の最初の文字にスタイルを適用する擬似要素です。雑誌やニュースサイトのような装飾的なドロップキャップ（大きな頭文字）を実現できます。適用可能なプロパティはfont、color、margin、padding、border、text-decorationなどに限定されています。

対応ブラウザ

デスクトップ

Chrome 1+
Edge 12+
Safari 1+
Firefox 1+

モバイル

Chrome Android 18+
Safari iOS 1+
Firefox Android 4+

基本構文

CSS 
article p:first-of-type::first-letter {
  font-size: 3em;
  float: left;
  line-height: 1;
  margin-right: 0.1em;
}

実務での使いどころ

  • ドロップキャップの実装

    ブログ記事の冒頭段落にドロップキャップ（装飾的な大文字）を適用し、印刷メディアのような洗練されたデザインを実現します。

注意点

  • ::beforeで生成されたコンテンツの最初の文字もマッチ対象になるため、::beforeとの併用時は意図した動作か確認してください。

アクセシビリティ

  • 装飾目的の::first-letterはスクリーンリーダーの読み上げに影響しませんが、コントラスト比と読みやすさを確保してください。

参考リンク