備忘録(counter-incrementの使い方)

参考サイト
www.nxworld.net


www.htmq.com


<!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>