ホームページ作成の基礎からご提供するホームページ作成Space

content: は、:before や :after と組み合わせて、要素の前後に文字やオブジェクトを挿入するのに用いられます。Opera 6.0 などがこの機能をサポートしています。

下記の例ではすべての H1要素の前に ■ を表示します。

H1:before { content: "■ "; }

下記の例では、ページを音読する際に、H1要素の前に sounds/h1.wav を鳴らします。

@media aural {
  H1:before { content: url(sounds/h1.wav); }
}

attr(属性名) は、属性名で指定した属性値を挿入します。下記の例では、<img> による画像の前に alt属性の値を表示します。

IMG:before { content: attr(alt); }

open-quote、close-quote は、開く引用符、閉じ引用符を意味します。引用符のペアは quotes: で指定します。下記の例では、<q>～</q> を 「～」で、二重に囲まれた <q>～</q> を 『～』で囲みます。

Q { quotes: "「" "」" "『" "』"; }
Q:before { content: open-quote; }
Q:after  { content: close-quote; }

counter(名前, 形式) は、名前で指定したカウンター値を挿入します。形式には decimal（数値）、lower-roman（小文字ローマ数字）、upper-roman（大文字ローマ数字）、cjk-ideographic（漢数字）、hiragana（あ、い、う・・・）、katakana（ア、イ、ウ・・・）などが定義されています。省略時は decimal になります。カウンター値は counter-increment: で増加させ、counter-reset: でリセットすることができます。下記の例では、章や節の前に、自動的に章番号、節番号を表示します。

H1:before {
  content: "第" counter(chapter) "章 ";
  counter-increment: chapter;
  counter-reset: section;
}
H2:before {
  content: counter(chapter) "." counter(section) ". ";
  counter-increment: section;
}

counters(名前, 区切り文字, 形式) は、二重、三重に入れ子構造になったカウンター値を区切り文字で連結したものに置換されます。下記の例では、入れ子構造になった <ol> リストにおいて、<ol> が出現する度に item[0]、item[1]、item[2] などの変数が初期化され、<li> の前で、item[0]、item[1]... を "." で連結したものが表示されます。

OL { counter-reset: item; }
LI { display: block; }
LI:before {
  content: counters(item, ".") ". ";
  counter-increment: item;
}

marker-offset: は、display:marker と組み合わせて、リストのマーカーを表示する位置を指定します。

LI:before {
  display: marker;
  marker-offset: 3em;
  content: counter(item) ". ";
  counter-increment: item;
}