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