スタイルシート［CSS］/テキスト・フォント/要素の前後に内容を追加する

content: ***;

ブラウザ
プロパティ	content

content は、要素の前後に内容（文字列や画像等）を追加するプロパティです。

このプロパティは、疑似要素の :before または :after と組み合わせて使用します。


p:before {
content: "文字列";
}

p:after {
content: url(icon.gif);
}

q[cite]:after {
content: attr(cite);
}

プロパティ名	値	説明
`content`	`"文字列"`	指定した文字列を追加する（文字列は引用符で囲む）
	`url(URI)`	指定したURIの画像等を追加する
	`attr(属性名)`	指定した属性の値を表示する

`:before` と `:after` について

:before … 要素の直前に対する指定
:after … 要素の直後に対する指定

:before と :after に関する詳細は、疑似要素の指定をご覧ください。

追加する内容

ここでは3種類の値を説明しています。（この他に、引用符を挿入することもできます）

文字列を追加する

文字列を追加する場合は、追加したい文字列を次のような形式で指定します。（文字列を引用符で囲みます）

content: "追加するテキスト";

例えば、p要素の直前に文字列を追加したい場合は、次のような指定内容になります。

p:before {
content: "追加するテキスト";
}

文字列の中に引用符を入れたい場合は、次のようにバックスラッシュ（ \ ）でエスケープしておきます。

content: "追加する\"テキスト";

画像等を追加する

画像等を追加する場合は、追加したいデータのURIを次のような形式で指定します。

content: url(example.gif);

url( ) … ( ) 内に画像等のURIを指定します。

例えば、p要素の直後に画像を追加したい場合は、次のような指定内容になります。

p:after {
content: url(example.gif);
}

属性の値を表示する

属性の値を表示する場合は、対象となる属性名を次のような形式で指定します。

content: attr(cite);

attr( ) … ( ) 内に属性名を指定します。

例えば、q要素の直後にcite属性の値を表示したい場合は、次のような指定内容になります。

q[cite]:after {
content: attr(cite);
}

q[cite] の部分は、cite属性が指定されているq要素に対して、このスタイルを適用させるといった指定になります。詳しくは属性を使った指定をご覧ください。

特殊文字の表示

16進数の数値文字参照を使うことで、特殊な文字・記号を表示させることができます。例えば、♥ハートマークを表示する場合は次のようになります。

content: "\002665";

または

content: "\2665";

contentプロパティで数値文字参照を使用する場合は、記述形式を次のように書き換える必要があります。

♥ … 16進数の数値文字参照（本来の形式）
\002665 … contentプロパティ用に書き換えた形式

& を \ に書き換えます。
# と x を 0 に書き換えます。（または削除します）
; を削除します。

使用例

段落の前後にテキストと画像を追加した例


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>文書のタイトル</title>

<style type="text/css">

p.example:before {
content: "【注意】";
color: #ff0000;
}

p.example:after {
content: url(icon.gif);
}

</style>

</head>
<body>

<p class="example">段落の直前に文字列、直後に画像を追加してみました。</p>

</body>
</html>

表示例: 段落の直前に文字列、直後に画像を追加してみました。

特殊文字を表示した例


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>文書のタイトル</title>

<style type="text/css">

p.example:before {
content: "\002665";
margin-right: 10px;
font-size: 300%;
color: #ff00ff;
}

p.example:after {
content: "\002600";
margin-left: 10px;
color: #ff0000;
}

</style>

</head>
<body>

<p class="example">段落の直前にハートマーク、直後に晴れマークを追加してみました。</p>

</body>
</html>

表示例: 段落の直前にハートマーク、直後に晴れマークを追加してみました。

属性の値を表示した例

SafariとChromeでは、引用符関連の値（以下の例では close-quote）を指定するとcontentプロパティの設定が無効になってしまうようです。


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>文書のタイトル</title>

<style type="text/css">

abbr[title] {
border-bottom: 1px #2b2b2b dotted;
}
abbr[title]:after {
content: "（" attr(title) "）";
color: #808080;
}

q {
quotes: "\"" "\"" "'" "'";
}
q:before {
content: open-quote;
}
q:after {
content: close-quote;
}
q[cite]:after {
content: close-quote "（引用元：" attr(cite) "）";
}

</style>

</head>
<body>

<p><abbr>WWW</abbr></p>
<p><abbr title="World Wide Web">WWW</abbr></p>

<p>TAG indexには、<q>contentプロパティで属性の値を表示できます</q>と書かれていました。</p>
<p>TAG indexには、<q cite="http://www.tagindex.com/">contentプロパティで属性の値を表示できます</q>と書かれていました。</p>

</body>
</html>

表示例

WWW

TAG indexには、contentプロパティで属性の値を表示できますと書かれていました。