| 適用できる要素 | before/after疑似要素 |
|---|---|
| 継承 | しない |
| 初期値 | normal |
CSSのcontentプロパティは要素の前（before）や後（after）に文字や画像などのコンテンツを追加する意味を持つプロパティです。
before・afterの疑似要素と共に利用され、要素に対してCSS側で文字や画像の追加が行えるのが特徴です。
contentプロパティは文字や、カウンター、引用符など様々な値を取る事が出来ます。
/* 構文 */
content : none | normal | 文字列 | url | カウンター名 | attr | open-quote | close-quote | no-open-quote | no-close-quote;
/* なし */
content: none;
/* 初期値: 何も表示されない */
content: normal;
/* 特定の文字列 */
content: "文字列";
/* 挿入したいコンテンツのURL */
content: url(URI);
/* 挿入したい属性の名前 */
content: attr(属性名);
/* 挿入したいカウンター */
content: counter(カウンターの名前);
content: counters(カウンターの名前)
/* 開始引用符 */
content: open-quote;
/* 終了引用符 */
content: close-quote;
/* 開始引用符を擬似的に挿入し、引用符の入れ子の深さを一段階深くする */
content: no-open-quote;
/* 終了引用符を擬似的に挿入し、引用符の入れ子の深さを一段階深くする */
content: no-close-quote;上記のサンプルコードではqumeru-counterというカウンターを作成し、counter関数で現在の値を取得しcontentプロパティでその値を追加しています。
CSSのカウンターについて分からない方は下記を参考にしましょう。
CSSのcontentプロパティはモダンなブラウザのほとんどでサポートされています。contentプロパティのブラウザ毎の対応状況を確認したい方は下記を確認しましょう。
contentプロパティを初めて利用する方で、contentプロパティで設定したコンテンツが追加されないというのはよくある問題です。下記を参考に対処しましょう。
contentプロパティで追加した文字列の中に改行を含めたい場合は下記を参考にしましょう。
contentプロパティで三角やコピーライトなど特殊文字を表示させたい場合は下記を参考にしましょう。
