関連セレクタ

• :before、:after

関連プロパティ

• display
• content
• counter-reset
• counter-increment
• marker-offset
• width
• overflow
• text-align

マーカー

HTMLでは li要素 の手前に、黒い点や数字が自動で付きます。それをマーカーと言います。それを独立させて考えようというのが、このマーカーボックスという考え方です。マーカーボックスは、'display: marker'で生成します。

マーカーボックスを使うと、今まで出来なかった背景やボーダー、文字の大きさなど、各種指定が出来ます。

例えば、このような事を書くと、
li {
  display: block;
}
li:before {
  display: marker;
  content: counters(mycount, lower-roman) ".";
  counter-increment: mycount;
}
以下のHTMLが
<ol>
  <li>これが1つ目の項目。</li>
  <li>これが2つ目の項目。</li>
  <li>これが3つ目の項目。</li>
</ol>
こんな具合に表示されます。
 　i. これが1つ目の項目。
  ii. これが2つ目の項目。
 iii. これが3つ目の項目。

もう一つの例を見てみましょう。
li {
  display: block;
}
li:before {
  display: marker;
  content: "(" counters(counter) ")";
  counter-increment: counter;
  width: 6em;
  text-align: center;
}
すると、こうなります。
  (1)　　これが1つ目の項目。
  (2)　　これが2つ目の項目。
  (3)　　これが3つ目の項目。

マーカーボックスには、マージンはありません。

:before疑似要素内にあるマーカーボックスのベースラインは、主要ボックスの1行目のベースラインにそろえます。主要ボックスがテキストを含まない場合、マーカーボックスと主要ボックスの外上辺をそろえます。

:afterにもマーカーを指定出来ます。:after疑似要素のマーカーボックスのベースラインは、主要ボックスの最終行のベースラインにそろえます。主要ボックスがテキストを含まない場合、こちらは逆にマーカーボックスと主要ボックスの外下辺をそろえます。マーカーと主要ボックスとのボーダー間の距離は、'marker-offset'で指定します。

幅について。'width'の値が[auto]なら、マーカーボックスの内容領域の幅は実際の内容量に合せて決まります。それ以外の値なら、その値がそのまま内容領域の幅になります。 値が実際の内容量に比べて小さければ、はみ出す内容の扱いは'overflow'で指定出来ます。'width'の値が実際の内容量に比べて大きいなら、マーカーボックス内での内容の水平方向の配置は'text-align'で指定出来ます。

注意点

1. マーカーボックスにはマージンがありません。
2. リスト項目要素に生成内容としてマーカーを付ける事は出来ません。