content: ***;

ブラウザ
  • IE
  • Cr
  • Sf
  • Fx
  • O
プロパティ

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

使用例

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

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

</body>
</html>

表示例

WWW

WWW

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

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