marker-offsetプロパティの説明
CSSのmarker-offsetプロパティは、displayプロパティの[marker値]の指定された要素に対して有効です。
リストマーカーは、[display: marker]の要素に対して、基本ボックスの外側に行ボックスとして生成されます。このボックスはpaddingとborderを持ちますが、marginを持ちません。そのため、[list-style-position]と[marker-offset]を使ってで指定主要ボックスとの距離を調節します。
[display: marker;]は、擬似要素[:before][:after]をセレクタとして指定し、それ以外のセレクタに対しては、[display: inline]と等しくなります。セレクタにマッチした対象のマーカボックスと基本ボックスの距離を指定します。
marker-offsetに与えられる値
auto- 自動的に間隔が指定されます。
number- 任意の単位に数値を付けて指定します。
marker-offsetの使用サンプル
<ul class="sample-block">
<li>リストサンプル01</li>
<li>リストサンプル02</li>
<li>リストサンプル03</li>
</ul>
.sample-block {
list-style: disc url(/images/sample_list_marker.png) outside;
margin: 0;
}