CSS3

プロパティ

marker-side

→●、mdn

方向性に於けるリスト マーカーの配置。

marker-side プロパティは、outside マーカー ボックス が［リスト アイテム自身（すなわち、出自の要素）、リスト コンテナ（すなわち、出自の要素の親）］どちらの方向性【direction】に基づいて位置するかを指定する。前者の事例では、マーカーの位置は、同じリスト内の各リスト アイテムごとに個別にあてがわれた方向性に基づいて変わり得る。後者の事例では、一体としてのリストにあてがわれた方向性により決定され、すべてのアイテムは同じ側に整列することになる。

以下のCSSが組み込んであります：

match-self

マーカー ボックスは、::marker の出自の要素 の方向性を利用して位置される。

<UL class=Test1 style="width:200px; border:1px solid red;">

 <LI>LI要素

 <LI><BDO dir="rtl">LI要素</BDO>

</UL>

¶

match-parent

マーカー ボックスは、::marker の出自の要素 の親要素の方向性を利用して位置される。

<UL class=Test2 style="width:200px; border:1px solid red;">

 <LI>LI要素

 <LI><BDO dir="rtl">LI要素</BDO>

</UL>

¶

［要素／::marker 疑似要素］は、既定では，そのリスト アイテムの方向性に則って自身を位置する。しかしながら、同じグループ内のリスト アイテムたちの方向性がまちまちな場合（例えば、HTML の OL 要素内に 異なる dir 属性値を伴う複数個の LI 要素がある場合）、すべてのマーカーを同じ側に整列した方が有用なこともある ― 作者が、すべてのマーカーが置かれる“側溝”をその側に作るよう指定することで、マーカが可視になるのを確約できるよう。

下に示す両描画とも、次の HTML 例から生成されているが、リストの marker-side の値に限り相違がある：

<ul>

  <li>左横書きの内容

  <li><bdo dir="rtl">右横書きの内容</bdo>

  <li>左横書きの内容

  <li><bdo dir="rtl">右横書きの内容</bdo>

</ul>

match-self	match-parent

テスト