contentプロパティは、:before疑似要素または:after疑似要素と併せて使うことで、要素の前後に内容を生成します。
また、カウンタを生成して自動的に連番を振ったり、quotesプロパティと併せて使う事で指定した文字列の引用符を挿入したりする事もできます。

対応ブラウザ

• 
• 
• 
• 
• 
• 
• 

プロパティの解説

値

normal｜none｜[ <文字列>｜<URI>｜<カウンタ>｜attr(<識別子>)｜open-quote｜close-quote｜no-open-quote｜no-close-quote ]+｜inherit

初期値

normal

適用される要素

:before疑似要素、:after疑似要素

継承

しません

パーセント値

N/A

メディア

all

値の解説

各値は、空白類文字で区切って何回でも組み合わせることができます。

normal

CSS2.1では内容を生成しませんが、CSS3では変わってくる可能性があるようです。

none

内容を生成しません。

<文字列>

指定された文字列を生成します。この際テキストは引用符で囲む必要があります。文字列に、引用符を使う場合は、\"のようにエスケープする必要がある。また、直接改行を含むことができないため、改行する場合にも\Aとエスケープ文字を使う必要があります。この際、合わせてwhite-space: pre-line;などの宣言も追加しておかないと改行されないことがあります。
なお、テキストに全角文字が含まれる場合、@charsetルールで文字コードの指定をしておきます。
他に、生成内容の改行目的ではなくソースの見た目上改行したい場合は、改行自体をバックスラッシュでエスケープする必要があります。

<URI>

指定したURIにある、画像などの外部リソースを生成します。この際、指定した外部リソースが取得できない場合は、指定されていなかったかのように無視されます。

<カウンタ>

カウンタを生成します。たとえば、要素に自動的に連番を振ったりすることができます。
<カウンタ>には、counter()とcounters()の2つの関数があり、どちらも2つの書式が有ります。
counter()の書式は、

• counter(<識別子>)
• counter(<識別子>, <list-style-type>)

となっており、counters()の書式は、

• counters(<識別子>, <文字列>)
• counters(<識別子>, <文字列>, <list-style-type>)

となっています。

識別子と文字列は任意の文字で、<list-style-type>の初期値はdecimalになります。
このカウンタをコントロールするには、counter-incrementプロパティとcounter-resetプロパティで指定します。

open-quote

quotesプロパティで指定された文字列を引用符の開始部に挿入します。また、入れ子の深さに応じて指定した引用符が挿入されます。

close-quote

quotesプロパティで指定された文字列を引用符の終了部に挿入します。また、入れ子の深さに応じて指定した引用符が挿入されます。

no-open-quote

引用符を挿入せずにquotesプロパティで指定されている引用符の入れ子の深さを一段階深くします。

no-close-quote

引用符を挿入せずにquotesプロパティで指定されている引用符の入れ子の深さを一段階浅くします。

attr(X)

そのセレクタの主体となる要素に指定された属性「X」の値を文字列として挿入します。例えば、印刷用のCSSにattr(href)と指定すると、プリント時にURLが出ます。なお、主体となる要素が指定された属性を持たない場合は、空の文字列が挿入されます。

改行自体のエスケープ

生成される内容の改行目的ではなく、ソースの見た目上の目的で改行したい場合以下のように改行自体をエスケープします。

p.note:after {
  content="a not s\
o very long title";
}
/* 上と下は同じ意味です */
p.note:after {
  content="a not so very long title";
}

contentのサンプル

<p class="sample01">
しーえすえす はっぴーらいふ ぜろ
</p>
<p class="sample02">
しーえすえす はっぴーらいふ ぜろ
</p>
<p class="sample03">
<a href="http://css-happylifezero.com/">しーえすえす はっぴーらいふ ぜろ</a>
</p>

p {
  margin: 20px;
}

p.sample01:before {
  content: "■"
}

p.sample02:before {
  content: url(/img/bnr/zero_80x15.gif);
}

p.sample03 a:after {
  content: "\A (" attr(href) ")";
  white-space: pre-line;
}

このサンプルを今見ているブラウザで表示すると以下のようになります。

サンプルのブラウザ上の表示

しーえすえす はっぴーらいふ ぜろ

しーえすえす はっぴーらいふ ぜろ

しーえすえす はっぴーらいふ ぜろ

最初のサンプルのような装飾目的で「■」を生成すれば無駄なテキストが減らせますし、数が多い場合などは装飾を変更する手間が省けたりします。
2番目のような画像の場合は背景目的で使う方が良いかもしれません。backgroundプロパティ使えばって話にもなるので、何ともですけど。
3番目は、URLを表示した例ですが、これを印刷用CSSで使うと印刷時にURLが表示され便利だったりします。
とはいえ、IE6, 7が対応していないので個人サイト等なら良いですが、仕事とかで実用できるのはまだまだ先になりそうです...

カウンタを使ったcontentのサンプル

<div class="section">
<h4>見出し</h4>
<p>段落</p>
<h4>見出し</h4>
<p>段落</p>
<h5>見出し</h5>
<p>段落</p>
<h5>見出し</h5>
<h5>見出し</h5>
<h5>見出し</h5>
<p>段落</p>
<h4>見出し</h4>
<p>段落</p>
<h5>見出し</h5>
<p>段落</p>
<h4>見出し</h4>
<p>段落</p>
<h4>見出し</h4>
<p>段落</p>
<h5>見出し</h5>
<p>段落</p>
<h5>見出し</h5>
<p>段落</p>
<h4>見出し</h4>
<h4>見出し</h4>
<p>段落</p>
<h5>見出し</h5>
<p>段落</p>
</div>

.section {
  margin: 20px;
}

.section p {
  margin: 0 0 5px;
}

.section h4 {
  counter-increment: chapter;
  counter-reset: section;
}

.section h4:before {
  content: counter(chapter) ". ";
}

.section h5 {
  counter-increment: section;
}

.section h5:before {
  content: counter(chapter) "-" counter(section)". ";
}

値に<カウンタ>を指定して、見出しに連番を振っています。
h5要素は、h4要素の番号が入り-に続いてh5要素の番号が入ります。この時に、h4要素に指定しているcounter-reset: section;によってh5要素の番号をリセットしてします。
なお、content: counter(chapter) "-" counter(section)". ";などにある、chapterやsectionは、識別子で扱える文字なら何でも構いません。

このサンプルを今見ているブラウザで表示すると以下のようになります。

サンプルのブラウザ上の表示

見出し

段落

見出し

段落

見出し

段落

見出し

見出し

見出し

段落

見出し

段落

見出し

段落

見出し

段落

見出し

段落

見出し

段落

見出し

段落

見出し

見出し

段落

見出し

段落