順序付きリスト先頭のアレの書体を変える

リスト項目の本文と連番のスタイルを分けたかったのでやった。書体っていうか、まぁ何にでも置き換えられると思う。

• Demo: 変更前
• Demo: 変更後

ここでは擬似要素と counter プロパティを用いて、リストの側に付いてるアレ（なんていうんだ）をセリフ体からサンセリフ体に変える。

ol {
  padding-left: 2em;
  list-style-type: none;
  counter-reset: ordered-list;
}

ol > li {
  position: relative;
}

ol > li::before {
  position: absolute;
  top: 0;
  left: -1.25em;
  counter-increment: ordered-list;
  content: counter(ordered-list) ".";
  font-family: sans-serif;
}

よーし、帰って飯食うぞ。

追記

記事タイトルを list-style-type の書体を変えると書いていたけどそういう内容ではなかった。list-style を counter で置き換えてるんであって。

ということで記事タイトルを変更した。