ゆったり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

オリジナルマーカー

以下のような採番をしたいときのサンプルです。

  1. aaa
  2. bbb
  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を使うことでいろいろなオリジナルマーカーを作れます。