content プロパティは，4.8 でも登場したが，自動生成において生成する内容を指定するものである。

content: 生成する内容;

このプロパティは，

• :before および :after 擬似要素に適用される。
• 初期値は，空の文字列である。
• プロパティの値は，継承されない。

　content プロパティの値は，次に示す値の種類からどれを何回でも指定することができる。それぞれは空白で区切る。ただし，プロパティの値じたいは空ではいけない。

文字列

生成する文字列を，引用符「"」または「'」でくくって指定する。

url(...)

かっこ内に示された URI のリソースを挿入する。指定のしかたは，background-image プロパティと同じである。ただし，指定されたりソースが見つからない，または，それを扱うことができない場合は，無視される。

カウンタ

counter() または counters() の関数のような形でカウンタを呼び出し，その値を内容とする。詳細は後述する。

open-quote または close-quote

これらのキーワードは，引用符で置換される。引用符についての詳細は，quote プロパティで指定される。これについては後述する。

no-open-quote または no-close-quote

これらのキーワードは何の文字列も生成しないが，引用符に関する内部状態を変化させる。詳細は後述する。

attr(X)

この関数のような指定は，content プロパティが適用されようとしている要素の属性（アトリビュート）X の値に置換される。指定した属性が存在しない場合は空の文字列になる。属性名の大文字小文字の区別は，文書言語による（HTML では区別はないが，XML では区別がある）。

　以下の例では，IMG 要素によって画像が挿入されると，その直後に小さな文字で ALT 属性の値をかっこでくくって展開する。

P { line-height: 130%; }
DIV.fig { text-align: center; }
IMG:after { font-size: smaller; content: "［" attr(ALT) "］"; }

<P>　ベンゼン C<SUB>6</SUB>H<SUB>6</SUB> の構造は，長い間化学者たちの間の疑問であった。ある日，ケクレは，ベンゼンについて，以下のような構造を提案した。</P>
<DIV CLASS="fig"><IMG SRC="f_benz.gif" WIDTH="58" HEIGHT="67" ALT="ケクレの構造式"></DIV>
<P>実際にはベンゼンの環の 6 つの結合は，単結合と二重結合の中間の状態だが，上の構造式がベンゼンをよく表すものとして用いられている。</P>

次の例では，EM 要素で示される強調語句の前後に，小さなアイコンを挿入する。

P { line-height: 130%; }
EM { font-style:normal; }
EM:before, EM:after { content: url(f_bang.gif); }

<P>　水酸化ナトリウムの扱いは注意を要する。皮膚についたらすぐに洗い流すことと，特に目に入れないように注意すること。<EM>失明の恐れがある。</EM></P>

　ここで，content プロパティに与える“文字列”の書き方の詳細に触れておこう。これは，url(...) で URI を指定する場合にも同様に適用される（ただし，URI の指定では引用符でくくることはオプショナルである）。

　文字列は，二重引用符「"」または単一引用符「'」でくくる。このとき，

• 二重引用符でくくったときは，文字列中で単一引用符を使ってもよい（"This is a 'quotation mark'."）。二重引用符を直接書くことはできず，円記号（バックスラッシュ）「\」を使って“\"”とエスケープする（"This is a \"quotation mark\"."）。
• 単一引用符でくくったときは，文字列中で二重引用符を使ってもよい（'This is a "quotation mark".'）。単一引用符を直接書くことはできず，円記号（バックスラッシュ）「\」を使って“\'”とエスケープする（'This is a \'quotation mark\'.'）。

　文字列には，改行を含んではならない。改行文字のように，タイプできない文字は，円記号（バックスラッシュ）「\」に続けて 16 進数の Unicode 値を与える。たとえば，改行は“\A”である。このように表現した文字の直後には，空白文字を入れてよい（e.g. "Hello.\A How are you?"）。

　文字列が長く，途中で改行して（しかし文字列としては 1 行で）書きたい場合は，行末を円記号（バックスラッシュ）として行を分かつ。

"This is a very very\
long string."

上記は，1 行で一気に書いたものと同じである。

　自動生成は，ここまで見てきた範囲のもののみを利用しても，さまざまなプロパティを組み合わせることで多彩な表現が可能になるだろう。

　HTML には，強制改行を行う BR 要素があることはご存じだろう。

　一般に，HTML ブラウザには，スタイルシートの指定がなくとも要素を適切に整形する機能がある。これは，ブラウザが HTML に対する“既定のスタイルシート”を持っているからだと考えた。しかし，BR 要素のように“改行文字を挿入する”というのはこれまでの記述では表すことはできなかった。ここで，自動生成を考えることにより，BR 要素は“改行文字を生成する要素”として捉えなおすことができる。すなわち，ルールセットとして，

BR:before { content: "\A"; }

が BR 要素の定義と考えることができる。

　ちなみに，HR 要素も同様に考えられる。一般的なグラフィカルなブラウザでは，

HR { border: 1px inset; }

のように表せるだろう。一方，テキストベースのブラウザは，たとえば表示領域の桁数が固定ならば，

HR:before { content: "----------------------------------------"; }

のように考えることができる（多くのテキストブラウザでは表示領域の桁数は可変なので，実際は上記のように単純には考えられない）。■