直感的に素直な感じでカスタムなリストマーカーを作りたい

例えば標準で用意されていないリストマーカーをUnicodeなんかで作りたいとき、以下のようにli::beforeにcontentを設定してマイナスのマージンをセットする、みたいなやり方がよく知られています。

ol li:nth-child(1)::before{
  content:'\2460'; /* CIRCLED DIGIT ONE */
}
ol li:nth-child(2)::before{
  content:'\2461';
}
/*
 （３〜９は省略）
*/
ol li:nth-child(10)::before{
  content:'\2469';
}
ol li::before{
  position:absolute;
  margin-left:-2.5rem;
}

しかし、このやり方ではnth-childの数字別にcontentを宣言することになるので、面倒だと思うのです。

もしかしたらcounterみたいなcss内の関数を使って色々できるのかもしれませんが…

nehan.jsを使った場合は、list-style-typeに関数値を設定することで、動的にunicodeを指定するスタイルがシンプルに記述できます。

Nehan.setStyle(".lst-circled-digit > li", {
  listStyleType:function(ctx){
    var index = ctx.getChildIndex();
    return String.fromCharCode(0x2460 + index);
  }
});

nehan.jsでは、list-style-typeが標準で定義された識別子ではない場合、css値がそのままマーカーとして使われるようになっています。

あるいは、::markerというli直下に差し込まれるpseudo-elementのcontentを動的に設定するやり方もあります。こちらのほうがわかりやすいかもしれませんね。

ただし::markerは公式のcssではまだdraftの扱いです。

Nehan.setStyle(".lst-circled-digit > li::marker", {
  content:function(ctx){
    var index = ctx.getParentStyle().getChildIndex();
    return String.fromCharCode(0x2460 + index);
  }
});

こうした上で、次のようなHTMLを組版させると

<ol class="lst-circled-digit">
  <li>あいうえお</li>
  <li>かきくけこ</li>
  <li>さしすせそ</li>
</ol>

縦書きと横書きで、それぞれ次のように表示されます。