<!DOCTYPE html>
<html>
<head>
<title>css计数器--兼容IE8</title>
<meta charset="utf-8"/>
<style type="text/css">
*{
margin:0;
padding:0;
}
ul{
list-style: none;
counter-reset: list;
}
li{
position: relative;
width: 100px;
height: 100px;
border:1px solid #ccc;
counter-increment: item;
}
li:after{
content: '';
display: block;
width: 0;
height: 0;
position: absolute;
top: 50%;
left: 50%;
transition:all .3s linear;
opacity: 0;
background: #000;
}
li:hover:after{
width: 100%;
height: 100%;
top: 0;
left:0;
opacity: 0.3;
}
li:before{
content: counter(item)".";
display: inline-block;
}
</style>
</head>
<body>
<ul>
<li>
aaa
</li>
<li>
aaa
</li>
<li>
aaa
</li>
</ul>
</body>
</html>
