Widely available YES。主要ブラウザで広く対応済み。本番利用を推奨。
構文・カスケード Widely available

Content

::before、::after 擬似要素で使用されることが最も多く、テキスト、画像、カウンター値、引用符などの生成コンテンツを挿入できます。装飾的なアイコン、自動番号付け、テキストの追加など多用途に活用されます。また、通常の要素に適用して既存コンテンツを置換することも可能ですが、この用法はあまり一般的ではありません。

生成コンテンツ擬似要素

概要

::before、::after 擬似要素で使用されることが最も多く、テキスト、画像、カウンター値、引用符などの生成コンテンツを挿入できます。装飾的なアイコン、自動番号付け、テキストの追加など多用途に活用されます。また、通常の要素に適用して既存コンテンツを置換することも可能ですが、この用法はあまり一般的ではありません。

対応ブラウザ

デスクトップ

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

モバイル

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

基本構文

CSS 
.external-link::after {
  content: ' ↗';
}
.chapter::before {
  content: counter(chapter) '. ';
}

実務での使いどころ

  • CSSカウンターによる自動番号付け

    CSSカウンターと content プロパティを組み合わせて、見出しやリスト項目に自動的に連番を付与できます。

注意点

  • content で挿入されたテキストはDOMの一部ではないため、ユーザーによるテキスト選択やコピーができない場合があります。重要な情報はHTML内に配置してください。

アクセシビリティ

  • content プロパティで生成されたテキストはスクリーンリーダーに読み上げられることがあります。装飾的なコンテンツには content: '' / '' を使用して代替テキストを空にすることを検討してください。

参考リンク