リストで先頭の記号をa) b)...と表記したい【CSS】

実装で詰まったので記録

a.)
b.)
じゃないのよ！
a)
b)
がいいのよ！
という自分のような人のために

実際のコード

See the Pen list_en by minmeg (@himinmeg) on CodePen.

詳しく解説

HTML

<ul class="list_en">
<li>りんご</li>
<li>トマト</li>
</ul>

HTMLは通常のリストと同じ。olでも可。

CSS

/* liの中で改行した時にインデントをそろえる */
.list_en {
  padding: 0 0 0 2em;
}

/* 先頭のマーカーを消して、liの数をカウントするカウンターを入れる */
.list_en li {
  list-style-type: none;
  list-style-position: inside;
  counter-increment: count;
}

/* 先頭に疑似要素でマーカーを足す、contentをカウンターで数えた「小文字のアルファベット表記 + )」にする */
.list_en li::before {
  display: marker;
  content: counter(count, lower-alpha) ") ";
}

counterって数字しか返さないと思っていたけど、いろいろいけるみたいです。

upper-romanでローマ数字
decimal-leading-zeroで01,02...と

他にも色々ありそうです。

参考

li内で改行したときにインデントを揃えるCSS
https://kailo.jp/post/7

counter() - CSS: カスケーディングスタイルシート | MDN
https://developer.mozilla.org/ja/docs/Web/CSS/counter()