丸付き数字のリストを表現するscss

丸付き数字リストをカジュアルに使いたい！

リスト表現で、ナンバーを多用していたら、見辛いから丸付き数字を使ってほしいと言われたのですが、リストのスタイルには丸付き数字がありません。そこで、そういうクラスを作ってみました。

$circle_numbersという配列に数値文字参照の文字列を突っ込んでいきます。
丸付き数字は1〜20までなので、20までしか対応しません。

SCSSを定義

.list-circle-number {
  list-style: none;
  padding-left: 0;
  $circle_numbers: "\002460",
                   "\002461",
                   "\002462",
                   "\002463",
                   "\002464",
                   "\002465",
                   "\002466",
                   "\002467",
                   "\002468",
                   "\002469",
                   "\00246a",
                   "\00246b",
                   "\00246c",
                   "\00246d",
                   "\00246e", 
                   "\00246f",
                   "\002470",
                   "\002471",
                   "\002472",
                   "\002473";
  li {
    &:before {
      display: marker;
    }
    @each $circle_number in $circle_numbers {
      $key: index($circle_numbers, $circle_number);
      &:nth-of-type(#{$key}):before {
        content: '#{nth($circle_numbers, $key)}';
      }
    }
  }
}

:nth-of-type擬似要素を使うことで、クラスの下の要素で出現した回数だけ丸付き数字が付きます。

実際に使ってみる

では、使ってみましょう。olタグで利用してみます。

<ol class="list-circle-number">
  <li>abc</li>
  <li>abc</li>
  <li>abc</li>
  <li>abc</li>
  <li>abc</li>
  <li>abc</li>
  <li>abc</li>
  <li>abc</li>
  <li>abc</li>
  <li>abc</li>
  <li>abc</li>
  <li>abc</li>
  <li>abc</li>
  <li>abc</li>
  <li>abc</li>
  <li>abc</li>
  <li>abc</li>
  <li>abc</li>
  <li>abc</li>
  <li>abc</li>
  <li>abc</li>
  <li>abc</li>
  <li>abc</li>
</ol>

以下のような見た目になります。

違和感なく利用することができますね！