生成コンテンツプロパティ

最終更新：2026-09-13

content 生成コンテンツプロパティ

content プロパティは要素の前後に生成コンテンツを挿入し、::before および ::after 疑似要素に必須です。文字列、画像、カウンター値、属性値を挿入でき、HTML を変更せずに装飾コンテンツの追加、フロートのクリア、リンク URL の表示などによく使われます。

カテゴリ
初期値	normal
継承	いいえ
適用対象
アニメーションタイプ
CSS バージョン	CSS2
状態	標準

📝 構文

content: normal | none | <string> | <image> | counter() | attr() | open-quote | close-quote | no-open-quote | no-close-quote;

⚙️ 値

値	タイプ	説明
`normal \| none \| <string> \| <image> \| counter() \| attr() \| open-quote \| close-quote \| no-open-quote \| no-close-quote`	キーワード	生成コンテンツ

▶ 例

以下のコードを編集して、プレイグラウンドでライブ結果を確認してください：

▶ 試す

🌐 ブラウザーサポート

ブラウザー	Chrome	Edge	Firefox	Safari	Opera
content	✓ v1	✓ v12	✓ v1	✓ v1	✓ v1
すべての主要ブラウザーでサポート

ヒント： content は ::before と ::after 疑似要素にのみ効果があります。省略すると疑似要素はそもそも生成されません。

重要： content 経由で挿入されたコンテンツはスクリーンリーダーに読み上げられないため、ページ理解に重要な情報をここに入れてはいけません。

❓ よくある質問

Qcontent プロパティと HTML に直接書くことの違いは？

Acontent 経由で挿入されるコンテンツはプレゼンテーション層に属します。DOM の一部ではなく、選択やコピーができず、検索エンジンにもインデックスされません。装飾（アイコン、接頭／接尾記号、カウンター番号）には適しています。重要な情報を担うコンテンツは HTML に書く必要があり、スクリーンリーダーが生成コンテンツを読み上げない可能性があるため、中心的な意味を伝えるべきではありません。

Qcontent で画像を挿入するには？

Acontent: url(image.png); と書くと疑似要素の位置に画像を配置でき、リンクや見出しの前の小さなアイコンに便利です。ただし url() ではサイズや配置を制御できません。content: "" に background-image と background-size を組み合わせるか、アイコンフォント、インライン SVG を使用する方がおすすめです。

Qなぜ ::before/::after には常に content: "" が必要なのか？

A疑似要素は content が設定されたときのみ生成されます。空文字列 "" でも同様で、設定しないと疑似要素全体が描画されません。空の content の主な用途は、position を使った装飾要素の描画、フロートのクリア（content: "" + display: table）、背景アイコンのためのスペース確保です。content は疑似要素を「オン」にするスイッチのようなものです。

Qcontent はどのような値をサポートしますか？

A文字列（例："✓"）、url() による画像、counter(name)/counters() によるカウンター、attr(href) による属性値、open-quote/close-quote などの引用符キーワード、および normal と none です。attr() が読み取れるのは文字列型の属性だけで、印刷スタイルでリンクの後ろに完全な URL を表示するのによく使われます。