content:特定の要素に対してコンテンツの挿入や置換を行う

初期値 normal
適用対象 全ての要素、DOMツリーに現れる疑似要素、ページのマージンボックス
継承 しない
アニメーション 離散値
対応ブラウザ caniuseで確認

contentプロパティの説明

contentは、特定の要素に対してコンテンツの挿入や置換を行います。基本的には、疑似要素::beforeまたは::afterに対して使用します。この値によって挿入されたコンテンツは、無名の置換要素として配置されます。

CSSで生成されたコンテンツは、DOMツリーには含まれません。そのため、contentを使って挿入するものに関して、文書の中で意味のあるコンテンツや、失われてしまった場合にアクセシビリティに影響を及ぼすものは避けた方が良いでしょう。通常、装飾目的やレイアウトの補助として用いられることが多いプロパティです。

contentに指定できる値

none
特にコンテンツを持ちません。擬似要素に適用した場合、その擬似要素は生成されません。
normal
特にコンテンツを持ちません。擬似要素に適用した場合は、noneと同じ扱いになります。
<string>
代替テキストを持ちます。この値は任意の数の文字列です。ラテン文字以外を挿入する場合は、Unicodeエスケープシーケンスを用いてエンコードする必要があります。
<image>
画像コンテンツを持ちます。URL指定による外部ファイルの参照、<gradient>値によるグラデーション、element()関数によるウェブページの一部を挿入できます。
counter()
CSSカウンターの値を持ちます。counter-resetおよびcounter-incrementで定義された値を使って、計算された内容を挿入します。counter()には、counter(name)またはcounter(name, style)の指定形式があります。
attr()
要素の属性値を持ちます。かっこの中には属性の名前が入ります。その属性が存在しない場合は、空文字列が返されます。
open-quote
quotesで定義された引用符の値を持ちます。引用符の組が定義されていれば、開始の記号を表します。
close-quote
quotesで定義された引用符の値を持ちます。引用符の組が定義されていれば、終了の記号を表します。
no-open-quote
入れ子になった引用符の階層を増加させます。
no-close-quote
入れ子になった引用符の階層を減少させます。

contentの使い方とサンプル

contentプロパティの構文は以下の通りです。

CSS
/* キーワード値 */
content: normal;
content: none;

/* <string>値 */
content: "text";
content: "日本語も可能";

/* <image>値 */
content: url("https://weblan3.com/image.png");
content: linear-gradient(#fff, #000);
content: image-set("pic1x.png" 1x, "pic2x.png" 2x);

/* <counter>値 */
content: counter(section);
content: counter(item, decimal-leading-zero);
content: counters(countbox, ":");
content: "第" counters(number) "章";

/* 属性値 */
content: attr(value string);

/* 引用符を挿入するキーワード */
content: open-quote;
content: close-quote;
content: no-open-quote;
content: no-close-quote;

/* グローバル値 */
content: inherit;
content: initial;
content: revert;
content: unset;

contentの実例

それでは実際にcontentプロパティの書き方を見ていきましょう。最初の例では、リンク要素の後に擬似要素を追加してcontentで文字列を挿入します。これにより、文書の中で意味を持たない補助的な役目の文字列を、CSSで配置することができます。

表示確認
CSS
.samp_box {
	overflow: auto;
	padding: 0 1rem 1rem;
}
.samp_box > h2 {
	margin: 1rem 0 0;
	font-size: 1rem;
}
.samp_box > p {
	margin-top: 1rem;
}
#exlink::after {
	content: "[↗]";
}
HTML
<section class="samp_box">
	<h2>content指定なし</h2>
	<p><a href="###">リンクテキスト</a></p>
	<h2>content指定あり</h2>
	<p><a href="###" id="exlink">リンクテキスト</a></p>
</section>

続いて、HTMLの属性を参照してその値を挿入した時の挙動を確認します。ここでは、<abbr>要素で略語を囲い、title属性で全文を表し、通常は不可視である属性の値をcontent経由で可視化します。

表示確認
CSS
.samp_box {
	overflow: auto;
	padding: 0 1rem 1rem;
}
.samp_box > h2 {
	margin: 1rem 0 0;
	font-size: 1rem;
}
.samp_box > p {
	margin-top: 1rem;
}
.samp_box abbr {
	text-decoration: underline solid;
}
#attr::after {
	color: #666;
	content:'['attr(title)']';
} 
HTML
<section class="samp_box">
	<h2>content指定なし</h2>
	<p>スタイルシートの中で最も普及している形式は、<abbr title="Cascading Style Sheets">CSS</abbr>です。</p>
	<h2>content指定あり</h2>
	<p>スタイルシートの中で最も普及している形式は、<abbr title="Cascading Style Sheets" id="attr">CSS</abbr>です。</p>
</section>

contentに関連するCSSプロパティ

内容の挿入・置換
content 特定の要素に対してコンテンツの挿入や置換を行う
counter-increment CSSカウンターの値を増加または減少させる
counter-reset CSSカウンターの値をリセットする
quotes contentプロパティで挿入する引用符の表示方法を設定する