【CSS】目次のリストを1-1とかにする

目次のカスタマイズ

はてなブログの目次で1-1とかにするやり方。

• .table-of-contentsの中にcounter-resetを入れるとうまく作動しない。
  • .entry-content内のulに記載でうまくいく。
  • counter-incrementとcontentは.table-of-contents内のli:beforeに記載でok
• numには好きな文字を入れる。
• list-style-type:none;必ず入れる。(リストマークが数字と重複してしまうため)

Sass(SCSS)

カウンター関数使用

ul{
    counter-reset: num; //カウントリセット
}
   ul.table-of-contents {
        list-style-type: none;  //元々のリストマークを消す      

         li:before {
            counter-increment: num; //カウント加算
            content: counters(num, "-") ". "; //表示用
          }

   ul li{list-style-type: none;} //入れ子の元々のリストマークを消す
}

尚1-1.の-や.を変えたければcontent内の"-"や"."を変更すれば良い。(何も書かないで""でもok)

参考

kiririmode.hatenablog.jp