ゆったりWeb手帳

気になったことをのんびり書くよ

⌚️

olタグでオリジナルマーカーをつける

olタグ

HTMLで番号付きのリストを使いたい場合は<ol>タグを使います。
自動で上から採番されるのでとっても便利。
こういうやつですね。
  1. aaa
  2. bbb
  3. ccc
HTML
<ol>
  <li>aaa</li>
  <li>bbb</li>
  <li>ccc</li>
</ol>
このマーカーはわりと好きなように変更できます。標準で用意されているマーカーは以下を参照。
list-of-type | MDN

オリジナルマーカー

以下のような採番をしたいときのサンプルです。
a-1. aaa
a-2. bbb
a-3. ccc
CSS
ol {
  list-style: none;
}
ol li {
  counter-increment: li;
}
ol li::before {
  content: 'a-' counter(li) '. ';
}
SCSSで書くと以下のような感じ。
SCSS
ol {
  list-style: none;

  & > li {
    counter-increment: li;

    &::before {
      content: 'a-' counter(li) '. ';
    }
  }
}
liに疑似要素::before::afterを使うことでいろいろなオリジナルマーカーを作れます。
次の記事おさいふというサービスを作った