CSS3

：

疑似要素

：

::marker

　 編集：2022.07.13 by T.A.

[Edge]○。→●、mdn

リスト マーカー内容。

E::marker
E 該当させる要素。

マーカー ボックスは、リスト アイテムの ::marker 疑似要素により、リスト アイテムの最初の子として生成される ― 要素上に ::before 疑似要素も存在するならば、その前に。それは、§ マーカ内容の生成法にて定義されるように内容で埋められる。

この例では、マーカを利用して、“Note”と指名されている段落を付番する： 
<style>
p { margin-left: 12 em; }
p.note {
  display: list-item;
  counter-increment: note-counter;
}
p.note::marker {
  content: "Note " counter(note-counter) ":";
}
</style>
<p>これは文書内の最初の段落。
<p class="note">これはとても短い段落。
<p>ここが末尾。

次の様に描画されるべきである：

::marker 疑似要素を利用すれば、リストのマーカーをリスト アイテム自身のテキストとは独立にスタイルできる： 
<style>
p { margin-left: 8em } /*  カウンタ用に空間を作る  */
li { list-style-type: lower-roman; }
li::marker { color: blue; font-weight:bold; }
</style>
<p>これは先行する長い段落 ...
<ol>
  <li>これは一個目のアイテム
  <li>これは二個目のアイテム
  <li>これは三個目のアイテム
</ol>
<p>これは後続する長い段落 ...

前掲の文書は、次の様に描画されるべきである：

以前までは、マーカーをスタイルする仕方は，継承を通す他になかった。欲されるマーカー スタイルをリスト アイテムにあてがった上で、リスト アイテムの実際の内容を要素で包装して、その要素上で元のスタイルに復帰させる必要があった。

マーカーは、リスト アイテム用に限り存在する。他の要素上では、::marker 疑似要素の content プロパティは none に算出されるものとする ― それは、マーカーの作成を抑止する。

::marker に適用されるプロパティ

¶省く

例

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

<OL>
 <LI class=Test>LI1
 <LI class=Test>LI2
 <LI class=Test>LI3
</OL>
box-shadow効かない

テスト
別画面に表示させて。
HTML：

ここに表示
HTML：

ここに表示
スクリプト：


スクリプト：



表示内容：
表示内容：