場合によっては、著者はユーザーエージェントに文書ツリーに由来しないコンテンツをレンダリングさせたくなることもあってもよい。この身近な1つの例は番号付きリストである。著者は明示的に番号をリストにしたくなく、番号の自動生成をユーザーエージェントに求める。同様に、著者はユーザーエージェントに、図のキャプションの前に単語"図"、または第7章のタイトルの前に"第7章"と挿入することを望んでもよい。特に音声や点字の場合は、ユーザーエージェントはこれらの文字列を挿入できるようにすべきである。
CSS 2.2において、コンテンツは次の2つのメカニズムによって生成されてもよい：
著者は、: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;
}
:beforeおよび:after疑似要素は、疑似要素があたかも疑似要素に関連付けられた要素の内部に挿入された実際の要素であるかのように、他のボックスと相互作用する。
例：
たとえば、以下の文書断片とスタイルシートで：
<p> Text </p> p:before { display: block; content: 'Some'; }
次の文書断片とスタイルシートとまったく同じ方法でレンダリングされる：
<p><span>Some</span> Text </p> span { display: block }
同様に、以下の文書断片とスタイルシートで：
<h2> Header </h2> h2:after { display: block; content: 'Thing'; }
次の文書断片とスタイルシートとまったく同じ方法でレンダリングされる：
<h2> Header <span>Thing</span></h2> h2 { display: block; }
span { display: block; }
注。この仕様は、（HTMLのIMGのような）置換要素をもつ:beforeおよび:afterの相互作用を完全に定義しない。これは、将来の仕様で詳細に定義されるだろう。
| プロパティ名：
| content |
| 値： | normal | none | [ <string> | <uri> | <counter> | attr(<identifier>) | open-quote | close-quote | no-open-quote | no-close-quote ]+ | inherit
|
|---|
| 初期値： | normal
|
|---|
| 適用要素： | :beforeおよび:after疑似要素
|
|---|
| 継承： | no
|
|---|
| パーセンテージ： | 利用不可
|
|---|
| メディア： | all
|
|---|
| 算出値： | 要素で、常に'normal'として計算する。:beforeおよび:afterで、'normal'が指定された場合、'none'として計算する。そうでなければ、URI値に対して絶対URI、attr()値に対して結果の文字列、他のキーワードに対して指定値に同じ。
|
|---|
このプロパティは、文書内のコンテンツを生成するために:beforeおよび:after疑似要素とともに使用される。値は次の意味を持つ：
- none
- 疑似要素を生成しない。
- normal
- :beforeおよび:after疑似要素を'none'として計算する。
- <string>
- テキストコンテンツ（文字列の節を参照のこと）。
- <uri>
- この値は、（画像などの）外部リソースを指定するURIとなる。ユーザーエージェントがリソースを表示できない場合、ユーザーエージェントは、あたかも指定されていなったかのようにリソースを除外する、またはリソースを表示不能という印を表示するかのいずれかでなければならない。
- <counter>
- カウンターは、2種類の異なる関数'counter()'または'counters()'を指定してもよい。前者は2つの形式、'counter(name)'または'counter(name, style)'を持つ。生成されるテキストは、この疑似要素で与えられる名前の最も内側のカウンターの値となる。指定したstyleで整形される（デフォルトは'decimal'）。後者もまた2つの形式、'counters(name, string)'または'counters(name, string, style)'を持つ。生成されるテキストは、この疑似要素で与えられた名前の全カウンターの値で、指定された文字で区切られた最も外側から最も内側までである。カウンターは指定したstyleでレンダリングされる（デフォルトは'decimal'）。詳細はカウンターと自動番号付けを参照のこと。名前は'none'、'inherit'または'initial'であってはならない。そのような名前は無視される宣言の原因となる。
- open-quoteおよびclose-quote
- この値は'quotes'プロパティから適切な文字列によって置き換えられる。
- no-open-quoteおよびno-close-quote
- 何もしないが、引用レベルは増加（または減少）する。
- attr(X)
- この関数は、セレクターの主体に対する属性Xの値を文字列として返す。文字列はCSSプロセッサーによって解析されない。セレクターの主体が属性Xを持たない場合、空文字列が返される。属性名の大小文字の区別は文書言語に依存する。
注。 CSS 2.2において、セレクターの主体とならない要素の持つ属性値は参照できない。
'display'プロパティは、コンテンツがブロックまたはインラインボックスに置かれるかどうかを制御する。
例：
次の規則は、文字列"Chapter: "を各H1要素の前に生成する：
H1:before {
content: "Chapter: ";
display: inline;
}
著者は、'content'プロパティの後の文字列のいずれかで"\A"エスケープシーケンスを記述することによって、生成されるコンテンツで改行を含んでもよい。この挿入される改行は、依然として'white-space'プロパティの影響下にある。"\A"エスケープシーケンスについての詳細は文字列および文字列と活字ケースを参照のこと。
例：
h1:before {
display: block;
text-align: center;
white-space: pre;
content: "chapter\A hoofdstuk\A chapitre"
}
生成されるコンテンツは、文書ツリーを変更しない。特に、文書言語のプロセッサーにフィードバックされることはない（たとえば、再解析）。
CSS 2.2において、スタイルに影響されかつコンテキストに依存した方法で、どのようにユーザーエージェントが引用符をレンダリングするかを、著者は指定してもよい。'quotes'プロパティは、埋め込まれた引用箇所の各レベルに対する引用符のペアを指定する。'content'プロパティは、その引用符へのアクセスを提供し、引用符を引用箇所の前後に挿入する。
このプロパティは、任意の数の埋め込まれた引用箇所に対して引用符を指定する。値は次の意味を持つ：
- none
- 'content'プロパティの'open-quote'および'close-quote'値は引用符を生成しない。
- [<string>
<string>]+
- 'content'プロパティの'open-quote'および'close-quote'値に対する値は、このリストから（開きと閉じ）引用符のペアが選ばれる。最初（最も左の）ペアは引用の最も外側のレベルを表し、2番目のペアは埋め込みの1番目のレベルを表す。ユーザーエージェントは、埋め込みのレベルに応じて引用符の適切なペアを適用しなければならない。
例：
たとえば、次のスタイルシートを：
/* 2言語の2レベルの引用符のペアを指定する */
q:lang(en) { quotes: '"' '"' "'" "'" }
q:lang(no) { quotes: "«" "»" '"' '"' }
/* Q 要素のコンテンツの前後に引用符を挿入する */
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'の値から文字列の1つと置き換わる。
'open-quote'は1組の引用符の1つ目を、'close-quote'は2つ目を参照する。どの引用符の組を用いるかは、引用の入れ子レベルに依存する。すべての'open-quote'の出現回数は現在の出現前のテキストが生成され、'close-quote'の出現回数を引いたものである。深さが0である場合、最初の組が使用され、深さが1である場合、2つ目の組が用いられる。深さがペア数より多い場合、最後のペアが繰り返される。深さが負になる'close-quote'または'no-close-quote'は、誤ったものであり（レンダリング時に）無視される。深さが0のままであり、引用符はレンダリングされない（'content'プロパティの値の残りがまだ書きこまれているにもかかわらず）。
注。引用の深さは、ソース文書や書式構造のネストとは無関係である。
一部の活版印刷スタイルは、複数の段落にまたがる引用の段落ごとの前に繰り返される開始引用符を要求するが、最後の段落は終了引用符のみで終了する。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'キーワードも何も挿入しないが、引用深さを1だけ増やす。
12.4 自動カウンターと番号付け
CSS 2.2における自動番号付けは、'counter-increment'と'counter-reset'の2つのプロパティで制御される。これらのプロパティによって定義されたカウンターは、'content'プロパティのcounter()およびcounters()関数とともに使用される。
'counter-increment'プロパティは、1つ以上のカウンターの名前（識別子）、オプションで各カウンターの後に整数を受け入れる。整数は、どのくらいカウンターが要素の出現ごとに増やされるかを示す。デフォルトの増加値は1である。0と負の整数は許可される。
'counter-reset'プロパティも、1つ以上のカウンター名、オプションで各カウンター名に続く整数値を含む。整数は、カウンターが要素の出現ごとに設定される値を与える。デフォルトは0である。
キーワード'none'、'inherit'、'initial'は、カウンター名として使用してはならない。'none'の値はそのままでカウンターがリセットされないことを意味し、それぞれインクリメントされる。'Inherit'はそのままで通常の意味を持つ（6.2.1節参照）。'Initial'は将来のために予約される。
例：
この例は、"Chapter 1"、"1.1"、"1.2"などの章や節の番号を付ける方法を示す：
BODY {
counter-reset: chapter; /* 章のカウンター範囲を作成 */
}
H1:before {
content: "Chapter " counter(chapter) ". ";
counter-increment: chapter; /* 章を1から加える */
}
H1 {
counter-reset: section; /* 0節を設定 */
}
H2:before {
content: counter(chapter) "." counter(section) " ";
counter-increment: section;
}
要素がカウンターのインクリメントまたはリセットをし、またそれを（その:beforeまたは:after疑似要素の'content'プロパティで）使用する場合、カウンターはリセットまたはインクリメントされた後に使用される。
要素がカウンターをリセットもインクリメントも両方する場合、カウンターは最初にリセットし、それからインクリメントする。
同じカウンターが'counter-reset'と'counter-increment'プロパティの値で1回以上指定される場合、カウンターのリセットまたはインクリメントは指定された順番で処理される。
例：
以下の例は'section'カウンターを0にリセットする：
H1 { counter-reset: section 2 section }
以下の例は'chapter'カウンターを3ずつインクリメントする：
H1 { counter-increment: chapter chapter 2 }
'counter-reset'プロパティはカスケード規則の後に続く。したがって、カスケードによって、次のスタイルシートは：
H1 { counter-reset: section -1 }
H1 { counter-reset: imagenum 99 }
'imagenum'のみリセットする。両方のカウンターをリセットするためには、同時に指定する必要がある：
H1 { counter-reset: section -1 imagenum 99 }
カウンターは、子孫要素または疑似要素でカウンターをリセットすることが自動的にカウンターの新しいインスタンスを作成するという意味で、"自己ネスト"である。要素が任意の深さに自分自身の内側にネストすることができる所で、HTMLにおけるリストのような状況にとって、これは重要である。各レベルごとに一意の名前のカウンターを定義することは不可能だろう。
例：
したがって、以下はネストされたリスト項目に番号付けするのに十分である。'display:list-item'とLI要素の'list-style: inside'の結果は、非常に似ている。
OL { counter-reset: item }
LI { display: block }
LI:before { content: counter(item) ". "; counter-increment: item }
カウンターの範囲は、そのカウンターに対する'counter-reset'を持ち、かつ要素の子孫と子孫をもつその要素の弟を含む文書内の最初の要素から始まる。しかし、要素は要素の弟の'counter-reset'や同じ要素の後の'counter-reset'によって作成された同じ名前をもつカウンターの範囲内の任意の要素は含まれない。
要素または疑似要素の'counter-increment'または'content'が任意の'counter-reset'の範囲にないカウンター参照する場合、'counter-reset'がその要素または疑似要素でカウンターを0にリセットされたかのように実装は動作すべきである。
上の例において、OLはカウンターを作成し、OLのすべての子供はそのカウンターを参照する。
item[n]によってn番目の"item"カウンターのインスタンスを表し、かつ"{"と"}"によって範囲の開始と終了を表す場合、次のHTML断片は指定されたカウンターを使用する。（上記の例で与えられたスタイルシートと仮定する）。
<OL> <!-- {item[0]=0 -->
<LI>item</LI> <!-- item[0]++ (=1) -->
<LI>item <!-- item[0]++ (=2) -->
<OL> <!-- {item[1]=0 -->
<LI>item</LI> <!-- item[1]++ (=1) -->
<LI>item</LI> <!-- item[1]++ (=2) -->
<LI>item <!-- item[1]++ (=3) -->
<OL> <!-- {item[2]=0 -->
<LI>item</LI> <!-- item[2]++ (=1) -->
</OL> <!-- -->
<OL> <!-- }{item[2]=0 -->
<LI>item</LI> <!-- item[2]++ (=1) -->
</OL> <!-- -->
</LI> <!-- } -->
<LI>item</LI> <!-- item[1]++ (=4) -->
</OL> <!-- -->
</LI> <!-- } -->
<LI>item</LI> <!-- item[0]++ (=3) -->
<LI>item</LI> <!-- item[0]++ (=4) -->
</OL> <!-- -->
<OL> <!-- }{item[0]=0 -->
<LI>item</LI> <!-- item[0]++ (=1) -->
<LI>item</LI> <!-- item[0]++ (=2) -->
</OL> <!-- -->
例：
カウンターがネストされない要素で使用される場合、範囲がどのように機能するかを示す別の例は、次のとおりである。章および節を番号付けするために上記で与えられるスタイル規則が、与えられるマークアップにどのように適用されるかを示す。
<!--"chapter" counter|"section" counter -->
<body> <!-- {chapter=0 | -->
<h1>About CSS</h1> <!-- chapter++ (=1) | {section=0 -->
<h2>CSS 2</h2> <!-- | section++ (=1) -->
<h2>CSS 2.2</h2> <!-- | section++ (=2) -->
<h1>Style</h1> <!-- chapter++ (=2) |}{ section=0 -->
</body> <!-- | } -->
'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, lower-greek) "]" }
DIV.note:before { content: counter(notecntr, disc) " " }
P:before { content: counter(p, none) }
（'display'が'none'に設定される）表示されない要素は、カウンターのインクリメントまたはリセットを行うことができない。
例：
たとえば、次のスタイルシートのために、class "secret"をもつH2要素は、'count2'をインクリメントしない：
H2.secret {counter-increment: count2; display: none}
生成されない疑似要素もまた、カウンターをインクリメントまたはリセットすることができない。
例：
たとえば、以下は'heading'をインクリメントしない：
h1::before {
content: normal;
counter-increment: heading;
}
一方、'hidden'に設定される'visibility'をもつ要素は、カウンターをインクリメントする。
CSS 2.2は、基本的なリストの視覚整形を提供する。'display: list-item'をもつ要素は、要素のコンテンツに対して主要ブロックボックスを生成し、場合により'list-style-type'および'list-style-image'の値に依存する、リスト項目である視覚的表示としてのマーカーボックスもまた生成する。
リストプロパティはリストの基本的な視覚整形を説明する。これはスタイルシートにマーカータイプ（画像、グリフ、または数字）および、主要ボックスに対するマーカーの位置（外側かコンテンツの前か）の指定を可能にする。リストプロパティは、著者がリストマーカーの異なるスタイル（色、フォント、配置など）を指定することや、主要ボックスに対する位置を調整することはできない。これは主要ボックスから派生させてもよい。
背景プロパティは主要ボックスにのみ適用する。'outside'マーカーボックスは透明である。
| プロパティ名：
| list-style-type |
| 値： | disc | circle | square | decimal | decimal-leading-zero |
lower-roman | upper-roman | lower-greek |
lower-latin | upper-latin | armenian | georgian |
lower-alpha | upper-alpha |
none | inherit
|
|---|
| 初期値： | disc
|
|---|
| 適用要素： | 'display: list-item'をもつ要素
|
|---|
| 継承： | yes
|
|---|
| パーセンテージ： | 利用不可
|
|---|
| メディア： | visual
|
|---|
| 算出値： | 指定される
|
|---|
このプロパティは、'list-style-image'が値'none'を持つ、またはURIで指示する画像が表示できない場合にリスト項目マーカーの外観を指定する。値'none'はマーカーを指定しない。そうでなければ、グリフ、数字方式、アルファベット方式の3種類のマーカーとなる。
グリフはdisc、circle、squareを指定する。これらの正確なレンダリングはユーザーエージェントに依存する。
数字方式は以下のとおり：
- decimal
- 10進数、1から始める。
- decimal-leading-zero
- 冒頭を0で詰め物をした10進数（たとえば、01, 02, 03, ..., 98, 99）。
- lower-roman
- 小文字のローマ数字（i, ii, iii, iv, v, など）。
- upper-roman
- 大文字のローマ数字（I, II, III, IV, V, など）。
- georgian
- 伝統的なグルジア数字（an, ban, gan, ..., he, tan, in, in-an, ...）。
- armenian
- 伝統的なアルメニア数字。
アルファベット方式は以下のとおり：
- lower-latinまたはlower-alpha
- 小文字のアスキー（a, b, c, ... z）。
- upper-latinまたはupper-alpha
- 大文字のアスキー（A, B, C, ... Z）。
- lower-greek
- 小文字の古代ギリシャ文字。アルファ、ベータ、ガンマ...（α, β, γ, ...）
この仕様は、アルファベットの終わりでどのようにアルファベットシステムの折り返しをするか定義しない。たとえば、26リスト項目のあとで、'lower-latin'のレンダリングは未定義である。したがって、長いリストでは、著者が本物の数字を指定することを推奨する。
CSS 2.2は、どのようにリスト番号がリセットされ、インクリメントされるかを定義しない。これはCSS List Moduleで定義されることが期待される[CSS3LIST]。
たとえば、以下のHTML文書で：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//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.
リストマーカーの揃え（ここでは、右揃え）はユーザーエージェントに依存する。
このプロパティは、リスト項目マーカーとして用いる画像を設定する。画像が利用可能の場合、'list-style-type'で設定したマーカーと置き換える。
画像の大きさは以下の規則より計算される：
- 画像が内在幅と高さを持つ場合、使用幅と高さは内在幅と高さになる。
- そうでなければ、画像が内在比と、内在幅または内在高さのいずれかを持つ場合、使用幅または高さが供給される内在幅または高さと同じで、不足する次元の使用値が供給される次元と比から計算される。
- そうでなければ、画像が内在比を持つ場合、使用幅は1emで、使用高さはこの幅と内在比から計算される。これが1emよりも大きな高さを生成したい場合、使用高さは1emの代わりに設定され、使用幅はこの高さと内在比から計算される。
- そうでなければ、内在幅あるいは1emを持つ場合、画像の使用幅は内在幅となる。内在高さあるいは1emを持つ場合、画像の使用高さはその内在高さである。
例：
以下の例は、画像"ellipse.png"を各リスト項目の先頭にマーカーとして設定する。
ul { list-style-image: url("http://png.com/ellipse.png") }
このプロパティは、主要ブロックボックスに対するマーカーボックスの位置を指定する。値は次の意味を持つ：
- outside
- マーカーボックスは、主要ブロックボックスの外側になる。浮動体に隣接するlist-itemマーカーの位置はCSS 2.2で未定義である。CSS 2.2は、マーカーボックスの正確な位置や塗装の順序における位置を指定しないが、リスト項目の'direction'プロパティが'ltr'のものについて、マーカーボックスがコンテンツの左側であることが、および要素の'direction'プロパティが'rtl'であるものについて、マーカーボックスがコンテンツの右側にあることが要求される。マーカーボックスは、主要ブロックボックスのボーダーに対して固定され、主要ボックスのコンテンツに対してスクロールしない。CSS 2.2において、要素の'overflow'が'visible'以外の場合、ユーザーエージェントはマーカーを隠してもよい。（これは将来変更することが期待される。）マーカーボックスの大きさやコンテンツは、主要ブロックボックスの高さとその最初の行ボックスの高さの両方またはいずれか一方に影響を与えてもよく、場合によっては新しい行ボックスの作成を引き起こしてもよい。注：この相互作用は、より正確にはCSSの将来のレベルで定義されるかもしれない。
- inside
- マーカーボックスは、要素のコンテンツの前および任意の:before疑似要素の前に、主要ブロックボックスの最初のインラインボックスとして配置される。CSS 2.2はマーカーボックスの正確な位置を指定しない。
たとえば：
<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'は、'list-style-type'、'list-style-image'、'list-style-position'という3つのプロパティを1箇所で設定できる略式表記プロパティである。
例：
ul { list-style: upper-roman inside } /* 任意の"ul"要素 */
ul > li > ul { list-style: circle outside } /* 任意の"ul"要素の子の
"li"の子の
"ul" */
著者は直接リスト項目の要素の'list-style'情報（例えば、HTMLで"li"）を指定してもよいが、慎重に行うべきである。次の規則は似ているが、最初は子孫セレクターを、2番目は（より具体的な）子セレクターを宣言している。
ol.alpha li { list-style: lower-alpha } /* 任意の "ol" の子孫 "li" */
ol.alpha > li { list-style: lower-alpha } /* 任意の"ol"の子"li" */
子孫セレクターのみを用いる著者は、意図する結果を得られないかもしれない。次の規則を考えてみる：
<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'ラベルをもつレベル1のリスト項目および、'disc'ラベルをもつレベル2の項目を持つ。しかし、カスケード順序は（特定のクラス情報を含む）最初の規則に2つ目の規則を隠させてしまう。次の規則は、代わりに子セレクターを用いることによって問題を解決する：
ol.alpha > li { list-style: lower-alpha }
ul li { list-style: disc }
もう1つの解決法は、リスト型の要素に'list-style'の情報を指定する方法である：
ol.alpha { list-style: lower-alpha }
ul { list-style: disc }
継承は、OLとUL要素からLI要素に'list-style'値を転送する。これは、リストのスタイル情報を指定するための推奨される方法である。
例：
URI値は、他の値と組み合わせてもよい：
ul { list-style: url("http://png.com/ellipse.png") disc }
上記の例において、画像が使用できない場合に'disc'が使用される。
'list-style'プロパティ内で'none'値は、'list-style-type'および'list-style-image'のどちらでがなくても設定し、そうでなければ'none'に設定される。しかし、両方が別な方法で指定される場合、宣言はエラーになる（したがって無視される）。
