文書ツリー から来ない内容を利用者エージェントにレンダリングさせたいと文書作成者が考える 場合がある。この例としてよく知られているのは，番号付けリストである。文書作成者は 番号を明示的に列挙せず，自動的に利用者エージェントに番号を生成させたい。 図の標題の前に'Figure'という語を，7番目の章の タイトルの前に'Chapter 7'という語を利用者エージェントに挿入する場合も 同様である。 特に，音声又は点字の場合は，利用者エージェントはこれらの文字列を 挿入できることが望ましい。
CSS2では, いくつかの機構が内容を生成してもよい。
次に，'content'特性と関連する機構を記述する。
文書作成者は :before擬似要素及び :after擬似要素を用いて，生成内容のスタイル及び位置を指定する。名前が示すとおり， :before擬似要素及び :after擬似要素は，要素の文書ツリー内容の前後に内容を挿入する。 'content'特性と これらの擬似要素を組み合わせることにより，挿入する内容を指定する。
例えば, 次の規則は，"class"属性が"note"という値を有するすべてのP要素の内容 の前に"Note: "という文字列を挿入する。:
P.note:before { content: "Note: " }
ボックスなど，要素が生成するフォーマット化オブジェクトは生成内容を含む。 例えば，上のスタイルシートを次に変更する場合を考慮してみる。
P.note:before { content: "Note: " }
P.note { border: solid green }
変更されたスタイルシートにより，緑の実線境界が初期文字列も含んだ 段落全体の周囲に表示される。
:before擬似要素及び:after擬似要素は，添付される文書ツリーの要素から 継承可能なあらゆる特性を継承する。
例えば，次の規則は，すべてのQ要素の前に，開始引用符を挿入する。 引用符の色は赤であるが，それ以外のフォントの情報はQ要素のフォントと 同じである。
Q:before {
content: open-quote;
color: red
}
:before擬似要素宣言又は:after擬似要素宣言では, 非継承特性は初期値をとる。
そのため，例えば，'display'特性の初期値が 'inline'であるため，前例の引用が行内ボックスとして挿入されることになる。即ち，要素の先頭にあるテキスト内容と同じ行に挿入される。次の例は， 'display'特性を 'block'と明示しているため，挿入テキストはブロックになる。
BODY:after {
content: "The End";
display: block;
margin-top: 2em;
text-align: center;
}
聴覚利用者エージェントは，BODY内容をすべて出力した後で"The End"という 語を読み上げる点に注意すること。
利用者エージェントは :before擬似要素及び :after擬似要素を有する 'position'特性, 'float'特性, list 特性, 及びtable特性を無視しなければならない。
:before擬似要素及び:after擬似要素により 'display'特性には次を利用することができる。
備考 将来的にリリースされるCSSの水準では，その他の値が 利用可能となるだろう。
この特性は:before擬似要素及び :after擬似要素とともに 使用され，文書の内容を生成する。値には次の意味がある。
'display'特性は，内容の位置がブロックボックスにあるか， 行内ボックスにあるか，マーカボックスにあるかを制御する。
内容が特定のメディアに依存する場合，文書作成者は @media規則内に 'content'を宣言することが望ましい。 例えば，文字テキストはどのメディアグループにも使用されるが，画像は視覚系メディアグループ 及びビットマップメディアグループにしか適用されず，音声ファイルは聴覚系メディアグループにしか 適用されない。
次の規則により，音声ファイルは引用の後で再生される(付加的な機構については 聴覚スタイルシートを参照のこと)。
@media aural {
BLOCKQUOTE:after { content: url("beautiful-music.wav") }
}
次の規則は画像の前にHTML"alt"属性のテキストを挿入する。画像が表示されない 場合，読者は"alt"テキストだけを目にすることになる。
IMG:before { content: attr(alt) }
文書作成者は， 'content'特性後の文字列の一つに"\A" エスケープシーケンスを書くことにより，生成内容に新しい行を含んでもよい。 これは，HTMLのBR要素に類似する 強制 行区切りを挿入する。 エスケープシーケンス"\A"についてより多くの情報を入手したい場合は， "文字列" 及び "文字及び文字の大小"を参照のこと。
H1:before {
display: block;
text-align: center;
content: "chapter\A hoofdstuk\A chapitre"
}
生成内容は文書ツリーを変更しない。特に, 生成内容は再解析などを目的として 文書言語プロセサにフィートバックされることはない。
備考 CSSの将来的な水準では, 'content' 特性は上以外の値をとり， 一部の生成内容に異なるスタイルを付加する可能性もあるが，CSS2では，:before擬似要素又は :after擬似要素の内容のスタイルはすべて同じである。
次の場合が考えられる。
ここでは，:after擬似要素を有する'run-in'ヘッダの例を示す。:after擬似要素 の後には:before擬似要素を有する段落が続く。すべての擬似要素は，この例では 行内(デフォルト)である。
H3 { display: run-in }
H3:after { content: ": " }
P:before { content: "... " }
上のスタイルシートは次のソース文書に適用される。
<H3>Centaurs</H3> <P>have hoofs <P>have a tail
視覚的にフォーマット化されると次となる。
Centaurs: ... have hoofs ... have a tail
CSS2では, 文書作成者は，スタイルシート依存及び文脈依存の方法で，利用者エージェントが どのように引用符をレンダリングするのがよいかを指定する。'quotes' 特性は埋込み引用の各レベルに対して，1組の引用符を指定する。 'content'特性はそれらの引用符にアクセスし，引用の前後に引用符を 挿入する。
この特性は，数多くの埋込み引用について，引用符を 指定する。値には次の意味がある。
例えば, 次のスタイルシートを考慮する。
/* Specify pairs of quotes for two levels in two languages */
Q:lang(en) { quotes: '"' '"' "'" "'" }
Q:lang(no) { quotes: "«" "»" "<" ">" }
/* Insert quotes before and after Q element content */
Q:before { content: open-quote }
Q:after { content: close-quote }
上のスタイルシートを次のHTML素片に適用する。
<HTML lang="en">
<HEAD>
<TITLE>Quotes</TITLE>
</HEAD>
<BODY>
<P><Q>Quote me!</Q>
</BODY>
</HTML>
利用者エージェントは次を生成することになる。
"Quote me!"
次のHTML素片を考慮する。
<HTML lang="no">
<HEAD>
<TITLE>Quotes</TITLE>
</HEAD>
<BODY>
<P><Q>Trøndere gråter når <Q>Vinsjan på kaia</Q> blir deklamert.</Q>
</BODY>
</HTML>
上は次を生成することになる。
«Trøndere gråter når <Vinsjan på kaia> blir deklamert.»
備考 上の例では，'quotes'が指定する引用符は，都合よく， コンピュータのキーボード上にあるが，高品質の植字を行う場合はISO 10646文字にある 他の文字も必要となる。次の表には，ISO 10646引用符文字の情報をいくつか 列挙している。
| 表示 | ISO 10646 符号 (16進) | 説明 |
|---|---|---|
| " | 0022 | QUOTATION MARK [the ASCII double quotation mark] |
| ' | 0027 | APOSTROPHE [the ASCII single quotation mark] |
| < | 2039 | SINGLE LEFT-POINTING ANGLE QUOTATION MARK |
| > | 203A | SINGLE RIGHT-POINTING ANGLE QUOTATION MARK |
| « | 00AB | LEFT-POINTING DOUBLE ANGLE QUOTATION MARK |
| » | 00BB | RIGHT-POINTING DOUBLE ANGLE QUOTATION MARK |
| ` | 2018 | LEFT SINGLE QUOTATION MARK [single high-6] |
| ' | 2019 | RIGHT SINGLE QUOTATION MARK [single high-9] |
| `` | 201C | LEFT DOUBLE QUOTATION MARK [double high-6] |
| '' | 201D | RIGHT DOUBLE QUOTATION MARK [double high-9] |
| ,, | 201E | DOUBLE LOW-9 QUOTATION MARK [double low-9] |
引用符は， 'content'特性の 'open-quote' 値及び'close-quote'値を用いて，文書の適正な 位置に挿入される。 'open-quote' 又は 'close-quote'が出現する度に，入れ子の深さに 応じて， 'quotes'の値に含まれる文字列の一つと 置換される。
'Open-quote'は一組の引用符のうち最初のものを表し， 'close-quote'は2番目 を表す。どの引用符を使用するかは引用の入れ子レベルに依存する。 一定の時点の引用レベルとは，すべての生成テキストのそこまでの'open-quote'の出現回数から'close-quote'の出現回数を差引いたものである。入れ子レベルが0である場合， 最初の一組が使用され，入れ子レベルが1である場合，2番目の一組が使用される。 入れ子レベルが引用符の組み合せ数より大きい場合は，最後の一組を繰り返し用いる。
この引用レベルはソース文書又はフォーマット化構造の入れ子レベルに 依存しない点に注意すること。
引用が複数の段落にまたがる場合，全段落で開始引用符を先頭に挿入するが， 終了引用符は最後の段落だけに挿入する印刷スタイルもある。CSSでは, "見えない" 終了引用符を挿入することに よってこれを実現できる。キーワード'no-close-quote'は引用レベルを減分するが，引用符を挿入しない。
次のスタイルシートはBLOCKQUOTEの全段落に開始引用符を配置し，最後に 一重終了引用符を挿入している。
BLOCKQUOTE P:before { content: open-quote }
BLOCKQUOTE P:after { content: no-close-quote }
BLOCKQUOTE P.last:after { content: close-quote }
要素の最後の子に一致できる選択子がないため，最後の段落を表すために クラス"last"でマーク付けしている。
対称性を考慮して, 'no-open-quote'キーワードも 存在する。これは何も挿入しないが，引用レベルを一レベル増分する。
備考 引用が周囲のテキストとは異なる言語である場合， 通常，引用自体の言語の引用符ではなく，周囲のテキストの言語の引用符を用いてテキストを引用する。
例えば, 英語のテキストにフランス語の引用がある場合を考慮する。
The device of the order of the garter is “Honi soit qui mal y pense.”フランス語のテキストに英語の引用がある場合を次に示す。
Il disait: « Il faut mettre l'action en ‹ fast forward ›.»
次のスタイルシートは'quote'を設定し，それにより， 'open-quote' 及び 'close-quote'はすべての要素で正確に動作することになる。 これらの規則は英語，フランス語，又は両方の言語を含む文書を対象としている。 別の言語に対応するには規則をさらに追加する必要がある。周囲のテキストの言語に基づき，要素に引用を設定するため，子の 結合子 (">") を使用する点に注意 すること。
[LANG|=fr] > * { quotes: "«" "»" "\2039" "\203A" }
[LANG|=en] > * { quotes: "\201C" "\201D" "\2018" "\2019" }
ここでは，英語の引用符をほとんどの人間が入力できる形式で示す。 英語の引用符を直接入力できる場合は，次のように見える。
[LANG|=fr] > * { quotes: "«" "»" "‹" "›" }
[LANG|=en] > * { quotes: "“" "”" "‘" "’" }
CSS2の自動番号付けは 'counter-increment' 及び'counter-reset'という二つの特性を用いて制御 される。 これらの特性により定義されるカウンタは， 'content'特性のcounter()関数及びcounters() 関数で使用される。
| 値: | [ <identifier> <integer>? ]+ | none | inherit |
| 初期値: | none |
| 適用対象: | すべての要素 |
| 継承: | しない |
| パーセント値: | N/A |
| メディア: | すべてのメディア |
| 値: | [ <identifier> <integer>? ]+ | none | inherit |
| 初期値: | none |
| 適用対象: | すべての要素 |
| 継承: | しない |
| パーセント値: | N/A |
| メディア: | すべてのメディア |
'counter-increment'特性は カウンタの名前(識別子)を一つ以上許容し，それぞれの名前の後には整数が任意に 続く。整数は要素のすべての出現について，どの程度カウンタが増分されるかを 示す。デフォルト増分は1である。ゼロ及び負の整数も使用できる。
'counter-reset'特性も一つ以上のカウンタの名前の リストを含み，それぞれの名前の後には任意に整数が続く。整数は， 要素の各出現において，カウンタが設定する値を提供する。デフォルトは0である。
'counter-increment'がどの 'counter-reset'の有効範囲(次を参照 )にもないカウンタを参照する場合は，カウンタはルート要素によって0にリセット されたものとみなす。
次の例では，章及び節に "Chapter 1"，"1.1"，"1.2"，などと番号付けをする方法を示す。
H1:before {
content: "Chapter " counter(chapter) ". ";
counter-increment: chapter; /* Add 1 to chapter */
counter-reset: section; /* Set section to 0 */
}
H2:before {
content: counter(chapter) "." counter(section) " ";
counter-increment: section;
}
要素がカウンタを増分/リセットし，同時に:before擬似要素又は:after擬似要素の 'content'特性にそれを使用する場合は，カウンタは増分/リセット を行った後に使用される。
要素がカウンタのリセットも増分も行う場合は，カウンタは最初にリセットされ，その後増分される。
'counter-reset'特性は段階規則に従う。 次のスタイルシートを適用する。
H1 { counter-reset: section -1 }
H1 { counter-reset: imagenum 99 }
段階化に従うと，上のスタイルシートは'imagenum'をリセットするにすぎない。両方のカウンタをリセットするためには，同時に指定される必要がある。
H1 { counter-reset: section -1 imagenum 99 }
カウンタは，子要素でカウンタを再使用するという意味で"自己入れ子"であり， カウンタの新しいインスタンスを自動的に生成する。HTMLのリストなどではこれは 重要であり，その場合，要素をその内部で任意のレベルに入れ子にすることができる。 各レベルに応じて，命名カウンタを一意に定義することはできない。
従って, 次を指定すれば，入れ子リスト項目を番号付けるには十分である。その結果， LI要素に 'display:list-item'及び 'list-style: inside'を設定する場合と非常に類似することになる。
OL { counter-reset: item }
LI { display: block }
LI:before { content: counter(item) ". "; counter-increment: item }
自己入れ子は，カウンタXについて 'counter-reset'を有するすべての要素が新しい カウンタXを生成し，その 有効範囲は要素，その兄要素，要素及びその兄 要素のすべての子孫であるという原則に基づいている。
上の例では, OLはカウンタを生成し，OL要素のすべての子はそのカウンタを参照 する。
item[n]により"item"カウンタの n番目のインスタンスを表示し, "(" 及び")" により有効範囲の開始及び終了を表示する場合は，次のHTML素片は指定されたカウンタを使用することになる。(上の例で提供された スタイルシートを使用する。)
<OL> <!-- (set item[0] to 0 -->
<LI>item <!-- increment item[0] (= 1) -->
<LI>item <!-- increment item[0] (= 2) -->
<OL> <!-- (set item[1] to 0 -->
<LI>item <!-- increment item[1] (= 1) -->
<LI>item <!-- increment item[1] (= 2) -->
<LI>item <!-- increment item[1] (= 3) -->
<OL> <!-- (set item[2] to 0 -->
<LI>item <!-- increment item[2] (= 1) -->
</OL> <!-- ) -->
<OL> <!-- (set item[3] to 0 -->
<LI> <!-- increment item[3] (= 1) -->
</OL> <!-- ) -->
<LI>item <!-- increment item[1] (= 4) -->
</OL> <!-- ) -->
<LI>item <!-- increment item[0] (= 3) -->
<LI>item <!-- increment item[0] (= 4) -->
</OL> <!-- ) -->
<OL> <!-- (reset item[4] to 0 -->
<LI>item <!-- increment item[4] (= 1) -->
<LI>item <!-- increment item[4] (= 2) -->
</OL> <!-- ) -->
'counters()'関数は，同じ名前を有するすべてのカウンタの値から作成される 文字列を生成する。名前は一定の文字列で区切られる。
次のスタイルシートは，"1", "1.1", "1.1.1"などと入れ子リスト項目を番号付けする。
OL { counter-reset: item }
LI { display: block }
LI:before { content: counters(item, "."); counter-increment: item }
デフォルトでは, カウンタは10進数を用いてフォーマット化されるが， 'list-style-type'特性に利用できる すべてのスタイルはカウンタにも利用できる。記法を次に示す。
counter(name)
デフォルトスタイルの場合は，次でもよい。
counter(name, 'list-style-type')
'disc', 'circle', 'square', 及び 'none'をはじめとするすべてのスタイルを使用できる。
H1:before { content: counter(chno, upper-latin) ". " }
H2:before { content: counter(section, upper-roman) " - " }
BLOCKQUOTE:after { content: " [" counter(bq, hebrew) "]" }
DIV.note:before { content: counter(notecntr, disc) " " }
P:before { content: counter(p, none) }
'display'が'none'に設定されているために 表示されない要素は, カウンタを増分又はリセットすることができない。
例えば, 次のスタイルシートの場合，クラス"secret"を有するH2は'count2' を増分しない。
H2.secret {counter-increment: count2; display: none}
一方， 'visibility'が 'hidden'に設定される要素はカウンタを増分 する。
CSSのブロックレベル要素のほとんどは基本ブロックボックスを一つ生成する。 ここでは，一つの要素にボックスを二つ生成させるCSSの二つの機構を論じる。 二つのボックスとは，要素の内容を含む 基本ブロックボックスと，箇条記号，画像，数などの装飾を含む分離マーカボックスとである。 マーカボックスは基本ボックスの内部又は外部に位置決めしてよい。 :before内容及び:after内容とは異なり, マーカボックスは，位置決め方式に関わらず， 基本ボックスの位置に影響しない。
二つの機構の一般的な機構はCSS2で初めて指定され， マーカと呼ばれている。この機構は，CSS1にもリスト特性として 含まれてはいるが，CSS2と比較すると制限がある。リスト特性により，文書作成者は共通の 順序付きリスト及び順序なしリストのシナリオを数多く得ることができる。しかし， マーカにより文書作成者はマーカの内容及び位置を厳密に制御できるのである。 マーカは カウンタとともに使用され，新しいリストスタイル の生成，マージン注釈の番号付けをはじめとした様々なことを実行する。
例えば, 次の例は，番号付けされた各リスト項目の後にピリオドを付加するために， マーカがどのように使用されるかを示している。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>
<TITLE>Creating a list with markers</TITLE>
<STYLE type="text/css">
LI:before {
display: marker;
content: counter(mycounter, lower-roman) ".";
counter-increment: mycounter;
}
</STYLE>
</HEAD>
<BODY>
<OL>
<LI> This is the first item.
<LI> This is the second item.
<LI> This is the third item.
</OL>
</BODY>
</HTML>
上のHTMLプログラム及びスタイルシートをフォーマット化すると次となることが望ましい。
i. This is the first item. ii. This is the second item. iii. This is the third item.
子孫選択子 及び 子選択子 を用いることにより, 埋込みリストの深さに応じて，様々なマーカ型を指定することができる。
:before擬似要素又は:after擬似要素内部で 'display'特性を'marker'に設定することにより，マーカを生成する。'block'及び'inline'の :beforeの内容 及び:afterの内容が要素が生成する基本ボックスの一部であるのに対し， 'marker'内容は，基本ボックスの外側に非依存でフォーマット化 される。マーカボックスは単一行，即ち，一つの 行ボックスとしてフォーマット化されるため， 浮動体ほど柔軟ではない。擬似要素の'content'特性が実際に内容を生成する場合に 限り，マーカボックスが生成される。
マーカボックスは，パディング及び境界をもつが，余白はもたない。
:before擬似要素の場合, マーカボックスのテキストの基底線は，基本ボックスの 内容の一行目のテキストの基底線を揃える。基本ボックスがテキストを 含まない場合は，マーカボックスの上外辺は基本ボックスの上外辺に 揃える。:after擬似要素の場合，マーカボックスのテキストの基底線は， 基本ボックスの内容の最終行のテキストの基底線に揃える。基本ボックスが テキストを含まない場合は，マーカボックスの下外辺は基本ボックスの下 外辺に揃える。
マーカボックスの高さは'line-height'特性によって提供される。 :before (:after)マーカボックスは，基本ボックスの最初の(最後の)行ボックス の高さの算出に関係する。従って，マーカボックスが別の行ボックス内に 存在しても，マーカは要素の内容の最初の行及び最終行に揃える。 最初の行ボックス又は最終の行ボックスが基本ボックスに存在しない場合は， マーカボックスは行ボックスを独自に設定する。
行ボックス内のマーカボックスの上下配置は， 'vertical-align'特性を用いて指定 される。
'width' 特性の値が'auto'である場合, マーカボックスの 内容幅は実際の内容幅と同じであり， そうでない場合は， 'width'の値である。'width'の値が内容幅よりも小さい場合は， 'overflow'特性がオーバフローの振る舞いを指定する。 マーカボックスは基本ボックスと重なってもよい。 'width'の値が内容幅よりも大きい場合は， 'text-align' 特性がマーカボックスの内容の 左右配置を決定する。
'marker-offset'特性は，マーカボックスと関連する 基本ボックスとの間の左右のオフセットを 指定する。測定距離は最も近い境界辺間の距離である。 備考 右向きの文脈で，マーカが浮動体の右に流れる場合は，基本ボックスは浮動体の右側で 下に向かって流れるが，マーカボックスは浮動体の左に現われる。基本ボックスの左境界 辺が浮動体 (浮動体の記述を参照)の左にあり， マーカボックスが基本ボックスの境界辺より外側にあるため，マーカも浮動体の左に 存在することになる。マーカが浮動体の左を流れる場合，左向きのフォーマット化 にも類似の振る舞いが適用される。
'display'特性が 'display: list-item'を有する要素が生成する内容について'marker'の値を有する 場合は，':before'に生成されるマーカボックスが 通常のリスト項目マーカを置換する。
次の例では, 内容は固定幅のマーカボックス内部で中央寄せになる。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>
<TITLE>Content alignment in the marker box</TITLE>
<STYLE type="text/css">
LI:before {
display: marker;
content: "(" counter(counter) ")";
counter-increment: counter;
width: 6em;
text-align: center;
}
</STYLE>
</HEAD>
<BODY>
<OL>
<LI> This is the first item.
<LI> This is the second item.
<LI> This is the third item.
</OL>
</BODY>
</HTML>
上の文書をフォーマット化すると次となることが望ましい。
(1) This is the
first item.
(2) This is the
second item.
(3) This is the
third item.
次の例は，リスト項目の前後にマーカを生成する。
次の文書を考慮する。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>
<TITLE>Markers before and after list items</TITLE>
<STYLE type="text/css">
@media screen, print {
LI:before {
display: marker;
content: url("smiley.gif");
LI:after {
display: marker;
content: url("sad.gif");
}
}
</STYLE>
</HEAD>
<BODY>
<UL>
<LI>first list item comes first
<LI>second list item comes second
</UL>
</BODY>
</HTML>
上をフォーマット化すると，次となることが望ましい。ここでは，スマイリのgif画像の代わりに 文字絵を使用している。
:-) first list item
comes first :-(
:-) second list item
comes second :-(
次の例はマーカを使用して，注釈(段落)を番号付けしている。
次の文書を考慮する。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>
<TITLE>Markers to create numbered notes4>/TITLE>
<STYLE type="text/css">
P { margin-left: 12 em; }
@media screen, print {
P.Note:before {
display: marker;
content: url("note.gif")
"Note " counter(note-counter) ":";
counter-increment: note-counter;
text-align: left;
width: 10em;
}
}
</STYLE>
</HEAD>
<BODY>
<P>This is the first paragraph in this document.</P>
<P CLASS="Note">This is a very short document.</P>
<P>This is the end.</P>
</BODY>
</HTML>
上をフォーマット化すると，次のようになることが望ましい。
This is the first paragraph
in this document.
Note 1: This is a very short
document.
This is the end.
| 値: | <length> | auto | inherit |
| 初期値: | auto |
| 適用対象: | 'display: marker'を有する要素 |
| 継承: | しない |
| パーセント値: | N/A |
| メディア: | 視覚的メディア |
この特性は，マーカボックスの最も近い 境界辺と関連する基本ボックスとの間の距離を指定する。 オフセットは利用者が指定するか(<length>)又はUAによって選択される('auto')かのいずれかである。 長さは負であってもよいが, 実装固有の制限が 存在する。
次の例は，番号付けされた各リスト項目の後にピリオドを追加するために, マーカが どのように使用されるかを示している。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>Marker example 5</TITLE>
<STYLE type="text/css">
P { margin-left: 8em } /* Make space for counters */
LI:before {
display: marker;
marker-offset: 3em;
content: counter(mycounter, lower-roman) ".";
counter-increment: mycounter;
}
</STYLE>
</HEAD>
<BODY>
<P> This is a long preceding paragraph ...
<OL>
<LI> This is the first item.
<LI> This is the second item.
<LI> This is the third item.
</OL>
<P> This is a long following paragraph ...
</BODY>
</HTML>
上のHTMLプログラム及びスタイルシートをフォーマット化すると，次のようになることが望ましい。
This is a long preceding
paragraph ...
i. This is the first item.
ii. This is the second item.
iii. This is the third item.
This is a long following
paragraph ...
リスト 特性により，リストの基本的な視覚フォーマット化を実現できる。 より一般的なマーカを用いる場合と同様， 'display: list-item'を有する要素は， 要素の内容及び任意のマーカボックスについて， 基本ボックスを生成する。 その他のリスト特性により，文書作成者は，マーカ型(画像，グリフ，数など)及び基本ボックス に対する位置(基本ボックスの外側か内側か)を指定することができる。 しかし，その他のリスト特性では，文書作成者は，リストマーカについて別のスタイル( 色，フォント，配置など)を指定したり，基本ボックスに対する位置を調整 したりすることができない。
さらに，'display: marker'を用いて生成されるマーカMが リスト特性を用いて生成されるリスト項目とともに使用される場合，Mは標準リスト 項目マーカを置換する。
リスト特性を用いると, 背景特性が基本ボックスだけに 適用される。即ち，'outside'マーカボックスは透明になる。マーカは マーカボックスのスタイルをより厳密に制御する。
| 値: | disc | circle | square | decimal | decimal-leading-zero | lower-roman | upper-roman | lower-greek | lower-alpha | lower-latin | upper-alpha | upper-latin | hebrew | armenian | georgian | cjk-ideographic | hiragana | katakana | hiragana-iroha | katakana-iroha | none | inherit |
| 初期値: | disc |
| 適用対象: | 'display: list-item'を有する要素 |
| 継承: | する |
| パーセント値: | N/A |
| メディア: | 視覚的メディア |
この特性は，'list-style-image'が'none'の値を有する場合，又はURIによって指定される画像が表示されない場合に，リスト項目マーカの見かけを指定する。'none'という値はマーカを指定しないが，'none'以外の値の場合は， 三種類のマーカが存在する。即ち，グリフ，番号付けシステム，及びアルファベットシステムである。 備考 番号付けされたリストで，リストのナビゲートを容易にすることにより，文書のアクセス可能性を改善することができる。
グリフは disc, circle, 及び squareを用いて指定される。 グリフの正確なレンダリングは利用者エージェントに依存する。
番号付けシステムの指定には次を用いる。
番号付けシステムを認識しない利用者エージェントは，'decimal'を使用するほうがよい。
備考 この文書は，ローマ数字がどのように算出されるかなど，各番号付けシステムの正確な機構を指定しない。将来的には，W3C 注釈がさらなる明確化を図ってよい。
アルファベットシステムは次を用いて指定される。
この標準情報は，アルファベットシステムがアルファベットの末尾でどのように折り返すかを定義しない。例えば，26項目のリストを処理した後の 'lower-latin'のレンダリングは定義されない。そのため，リストが長くなる場合は， 文書作成者は番号を指定することを推奨する。
例えば, 次のHTML文書を考慮する。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>
<TITLE>Lowercase latin numbering</TITLE>
<STYLE type="text/css">
OL { list-style-type: lower-roman }
</STYLE>
</HEAD>
<BODY>
<OL>
<LI> This is the first item.
<LI> This is the second item.
<LI> This is the third item.
</OL>
</BODY>
</HTML>
上をフォーマット化すると，次となっているであろう。
i This is the first item. ii This is the second item. iii This is the third item.
リストマーカの配置(ここでは右揃え)は利用者エージェントに依存する点に 注意すること。
備考 CSSの将来の版では，国際的番号付けスタイルについて，より完成した機構が 提供されると思われる。
| 値: | <uri> | none | inherit |
| 初期値: | none |
| 適用対象: | 'display: list-item'を有する要素 |
| 継承: | する |
| パーセント値: | N/A |
| メディア: | 視覚的メディア |
この特性は，リスト項目マーカとして使用される画像を設定する。 画像が利用できる場合, 'list-style-type'マーカで 設定したマーカと置換する。
次の例は，各リスト項目の先頭のマーカを 画像"ellipse.png"に設定している。
UL { list-style-image: url("http://png.com/ellipse.png") }
| 値: | inside | outside | inherit |
| 初期値: | outside |
| 適用対象: | 'display: list-item'を有する要素 |
| 継承: | する |
| パーセント値: | N/A |
| メディア: | 視覚的メディア |
この特性は基本ブロックボックスに対するマーカボックスの位置を指定する。 値には次の意味がある。
例を次に示す。
<HTML>
<HEAD>
<TITLE>Comparison of inside/outside position</TITLE>
<STYLE type="text/css">
UL { list-style: outside }
UL.compact { list-style: inside }
</STYLE>
</HEAD>
<BODY>
<UL>
<LI>first list item comes first
<LI>second list item comes second
</UL>
<UL class="compact">
<LI>first list item comes first
<LI>second list item comes second
</UL>
</BODY>
</HTML>
上の例をフォーマット化すると，次となる。
左向きのテキストでは, マーカはボックスの右側に存在することになる。
| 値: | [ <'list-style-type'> || <'list-style-position'> || <'list-style-image'> ] | inherit |
| 初期値: | 簡略記述特性については定義されない |
| 適用対象: | 'display: list-item'を有する要素 |
| 継承: | する |
| パーセント値: | N/A |
| メディア: | 視覚的メディア |
'list-style'特性は， 'list-style-type', 'list-style-image', 及び 'list-style-position'の三つの特性をスタイルシートの同じ位置に設定することを目的とした簡略記述である。
UL { list-style: upper-roman inside } /* Any UL */
UL > UL { list-style: circle outside } /* Any UL child of a UL */
文書作成者は，HTMLのLIなど，リスト項目の要素に直接'list-style'情報を指定してもよいが, 注意してそれを行うことが望ましい。次の規則は一見類似しているが， 最初の規則は 子孫選択子を宣言し，2番目の規則はより固有の 子選択子 を宣言している。
OL.alpha LI { list-style: lower-alpha } /* Any LI descendant of an OL */
OL.alpha > LI { list-style: lower-alpha } /* Any LI child of an OL */
文書作成者が子孫選択子しか使用しない 場合は，期待した結果を得られないこともある。次の規則を考慮する。
<HTML>
<HEAD>
<TITLE>WARNING: Unexpected results due to cascade</TITLE>
<STYLE type="text/css">
OL.alpha LI { list-style: lower-alpha }
UL LI { list-style: disc }
</STYLE>
</HEAD>
<BODY>
<OL class="alpha">
<LI>level 1
<UL>
<LI>level 2
</UL>
</OL>
</BODY>
</HTML>
上の規則では， 'lower-alpha'ラベルをもつlevel 1のリスト項目及び'disc'ラベルをもつ level 2のリスト項目を意図している。しかし, 段階順に従うと，固有のクラス情報を 含む最初のスタイル規則が，2番目のスタイル規則を隠蔽する結果となる。 次の規則は， 子選択子 を代わりに採用することによって，問題を解決している。
OL.alpha > LI { list-style: lower-alpha }
UL LI { list-style: disc }
'list-style'情報の指定をリスト型要素に 限定することも一つの解決法である。
OL.alpha { list-style: lower-alpha }
UL { list-style: disc }
'list-style'値はOL要素及びUL要素から LI要素へ継承される。リストスタイル情報を指定する方法としてこれを推奨する。
URI値をその他の値と組み合わせてもよい。その例を次に示す。
UL { list-style: url("http://png.com/ellipse.png") disc }
上の例では, 'disc'は画像が利用できない場合に使用される。
'list-style'特性を'none'に設定すると， 'list-style-type'も 'list-style-image'も'none'に設定される。
UL { list-style: none }
結果として，リスト項目マーカは表示されなくなる。