スタイルシート［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: "追加するテキスト";
}

■画像等を追加する

画像等を追加する場合は、追加したいデータの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要素に対して、このスタイルを適用させる」といった指定になります。詳しくは「属性を使った指定」をご覧ください。

IEでは、表示モードが「標準モード」の場合のみ機能するようです。（IE 7以下では未対応）

使用例

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


<!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>

表示例

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

■属性の値を表示した例

※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>HTML indexには、<q>contentプロパティで属性の値を表示できます</q>と書かれていました。</p>
<p>HTML indexには、<q cite="http://ryukyuocho2.web.fc2.com/">contentプロパティで属性の値を表示できます</q>と書かれていました。</p>

</body>
</html>

表示例

WWW

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

サイト内検索

テキスト・フォント

要素の前後に内容を追加する

content: ***;