<!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>css计数器 及 鼠标经过从中间扩散一个矩形（正方形长方形均可）
原文地址：https://www.cnblogs.com/dongxiaolei/p/8303780.html