Content
content は CSS のプロパティで、ある要素を生成された値で置き換えます。これは、要素または擬似要素の内部でレンダリングされるものを定義するために使用することができます。要素の場合、 content プロパティは、要素が通常通りレンダリングされるか（normal または none）、画像（および関連付けられた "alt" テキスト）に置き換えられるかを指定します。擬似要素とマージンボックスの場合、 content は、コンテンツを画像、テキスト、その両方、またはなしとして定義し、要素が全体的にレンダリングされるかどうかを決定します。
content プロパティを使用して挿入されたオブジェクトは、 無名の置換要素 になります。
対応ブラウザ
| 機能 | デスクトップ | モバイル | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 1 | 12 | 1 | 1 | 18 | 1 | |
close-quote | 1 | 12 | 1 | 1 | 18 | 1 |
element replacement エレメント交換 | 28 | 79 | 63 | 9 | 28 | 9 |
| は CSS のデータ型で、2 色以上の連続的な色の変化で構成される特殊な型の image です。 | 26 | 12 | 113 | 7 | 26 | 7 |
no-close-quote | 1 | 12 | 1 | 1 | 18 | 1 |
no-open-quote | 1 | 12 | 1 | 1 | 18 | 1 |
none | 1 | 12 | 1 | 1 | 18 | 1 |
none applies to elements 実験的 要素の「content: none」 | | | 91 | | | |
normal | 1 | 12 | 1 | 1 | 18 | 1 |
open-quote | 1 | 12 | 1 | 1 | 18 | 1 |
| url() は CSS の関数で、ファイルを含めるために使用します。引数は絶対 URL、相対 URL、Blob URL、data URL の何れかです。 url() 関数は attr 関数のように、他の CSS 関数に引数として渡すことができます。値を使用するプロパティに応じて、求められるリソースは画像、フォント、スタイルシートのいずれかになります。url() 関数記法は データ型の値になります。 | 1 | 12 | 1 | 1 | 18 | 1 |
| その他 | ||||||
| は CSS のデータ型で、一連の文字列を表します。文字列は content, font-family, quotes など、数々の CSS プロパティで使用されます。 | 1 | 12 | 1 | 1 | 18 | 1 |
| CSS タイプ | ||||||
unicode escaped characters Unicode エスケープ文字 (`\xx`) | 1 | 12 | 1 | 1 | 18 | 1 |
- このブラウザでは部分的にしか実装されていません
- `content: <gradient>` は、::before/::after 擬似要素を描画しません。 バグ 1832901 を参照してください。
- ブラウザの実験的フラグを有効にする必要があります
基本構文
.external-link::after {
content: ' ↗';
}
.chapter::before {
content: counter(chapter) '. ';
}ライブデモ
実務での使いどころ
-
CSSカウンターによる自動番号付け
CSSカウンターと content プロパティを組み合わせて、見出しやリスト項目に自動的に連番を付与できます。
注意点
- content で挿入されたテキストはDOMの一部ではないため、ユーザーによるテキスト選択やコピーができない場合があります。重要な情報はHTML内に配置してください。
アクセシビリティ
- content プロパティで生成されたテキストはスクリーンリーダーに読み上げられることがあります。装飾的なコンテンツには content: '' / '' を使用して代替テキストを空にすることを検討してください。