content | スタイルシートリファレンス

適用できる要素before/after疑似要素
継承しない
初期値normal

contentとは?

CSSのcontentプロパティは要素の前(before)や後(after)に文字や画像などのコンテンツを追加する意味を持つプロパティです。

beforeafterの疑似要素と共に利用され、要素に対してCSS側で文字や画像の追加が行えるのが特徴です。

contentで指定できる値

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;

contentを使ったサンプルコード

文字列を追加

URLを元にコンテンツを追加

カウンターを追加

上記のサンプルコードではqumeru-counterというカウンターを作成し、counter関数で現在の値を取得しcontentプロパティでその値を追加しています。

CSSのカウンターについて分からない方は下記を参考にしましょう。

CSSのカウンターで連番を自動ナンバリングする方法!のイメージ
CSSのカウンターで連番を自動ナンバリングする方法!
CSSのカウンターを使って連番の数字を自動ナンバリングする方法をサンプルコード付きで解説します。CSSのカウンターのテクニックをぜひ習得しましょう。

引用符を追加

contentのブラウザ対応状況

CSSのcontentプロパティはモダンなブラウザのほとんどでサポートされています。contentプロパティのブラウザ毎の対応状況を確認したい方は下記を確認しましょう。

Can I use... Support tables for HTML5, CSS3, etc

contentプロパティの関連情報

contentプロパティを初めて利用する方で、contentプロパティで設定したコンテンツが追加されないというのはよくある問題です。下記を参考に対処しましょう。

CSSの::before・::afterの疑似要素が効かない場合の対処法!のイメージ
CSSの::before・::afterの疑似要素が効かない場合の対処法!
CSSの::before・::afterの疑似要素が効かない場合の原因と対処法についてサンプルコード付きで解説します。contentプロパティがなかったり、positionの指定が間違っているなどいくつかの失敗パターンを紹介します。

contentプロパティで追加した文字列の中に改行を含めたい場合は下記を参考にしましょう。

CSSの::before・::afterの疑似要素のcontentで改行させる方法!のイメージ
CSSの::before・::afterの疑似要素のcontentで改行させる方法!
CSSの::before・::after疑似要素とcontentプロパティを組み合わせて要素のテキストの前や後に特定の文字を付ける場合で、その文字の中で改行させる方法をサンプルコード付きで解説します。

contentプロパティで三角やコピーライトなど特殊文字を表示させたい場合は下記を参考にしましょう。

CSSのcontentプロパティで特殊文字を表示する方法!のイメージ
CSSのcontentプロパティで特殊文字を表示する方法!
CSSのcontentプロパティ(::before・::after疑似要素)で三角やコピーライトなど特殊文字の記号を表示する方法をサンプルコード付きで解説していきます。