今回やりたいこと

番号付きのリストを作成します。単純にpタグの改行でリストっぽく見せることは可能ですが、スマホで表示した時など、文章が長文の場合数字の下にテキストが回り込んでしまって、「1.」「2.」「3.」という数字が強調されなくなって見づらくなります。

今回はscssで、これ一つで実現できるコードを記事に起こしておきます。

Pug

今回はhtmlではなくpugのコードになりますが、それが以下です。


ol.p-list-02
  li テキストテキストテキストテキストテキストテキストテキストテキストテキスト
  li テキストテキストテキストテキストテキストテキストテキストテキストテキスト
  li テキストテキストテキストテキストテキストテキストテキストテキストテキスト

Scssのコードは以下です。


.p-list {
  &-02 {
    counter-reset: item;
    list-style-type: none;
    padding-left: 0;
    & > li {
      text-indent: -1.3em;
      padding-left: 1.3em;
      color: $color-black;
      &:before {
        counter-increment: item;
        content: counter(item) ".";
        /* 以下は自由に装飾... */
        padding-right: 0.5em;
      }
    }
  }
}

コピペするだけで簡単に使えると思うので、見栄えの良い番号付きリストをコーディングするときに是非試してみてください！