備忘録(counter-incrementの使い方)
参考サイト
www.nxworld.net
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>conter-increment使い方</title> <style> *{margin:0; padding:0;} li{list-style: none;} #conter{width:50px; margin-left:0;} #conter ul li{ margin-bottom: 10px; line-height: 2.0; font-size: 25px; text-align: center; height: 50px; background: aqua; vertical-align: middle; counter-increment: num; /*上位階層の順番を変数として取得*/ } #conter ul li .box::before { color:#fff; content: counter(num, decimal-leading-zero); /*下位階層の番号を振りたいところに変数を入れる。*/ } </style> </head> <body> <div id="conter"> <ul> <li><div class="box"></div></li> <li><div class="box"></div></li> <li><div class="box"></div></li> <li><div class="box"></div></li> <li><div class="box"></div></li> </ul> </div> </body> </html>