<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<title>html5</title>
<style>
body{font-size:12px; font-family: "Microsoft Jas Black", Verdana, Arial; margin:0; padding:0; background: #f6f6f6;}
div{margin:0 auto; padding:0;}
h1,h2,h3,h4,h5,h6,ul,li,dl,dt,dd,form,img,p{
margin:0; padding:0; Border:none; List-style-type:none;
}
. clearfix:after{
Content: "."; Display:block; height:0; Clear:both;
Visibility:hidden;
}
*html. clearfix{
height:0;
}
img {max-width:100%; height:auto; width:auto\9;/* IE8 */}
*+html. clearfix{
height:0;
}
. list{position:relative;top:50%;width:80%;max-width:1300px;margin:0 Auto;transform:translatey (-50%);- Webkit-transform:translatey ( -50%);-moz-transform:translatey (-50%)}
. list>li{width:16.66%;margin:0 0.5%;p adding:10px 0;float:left}
. List>li:before{content: ""; width:0;margin:10% 0 0-1px;padding-top:16%;border-left:1px solid #CCC; Float:left}
. List>li>a{position:relative;display:block;text-align:center;color: #333; Transform:scale (1);- Webkit-transform:scale (1);-moz-transform:scale (1); Transition:all. 5s;-webkit-transition:all. 5s;-moz-transition: All. 5s}
. List>li>a:before{display:block;content: ""; width:0;padding-top:36%}
. list>li>a:after{position:absolute;content:attr (title); width:100%;left:0;top:50%;opacity:0; Pointer-events:none;transform:translatey ( -200%);-webkit-transform:translatey ( -200%);-moz-transform:translatey ( -200%); Transition:all. 5s;-webkit-transition:all. 5s;-moz-transition:all. 5s}
. list>li>a>img{position:absolute;max-width:98%;left:0;top:0;right:0;bottom:0;margin:auto;transition:o Pacity. 5s;-webkit-transition:opacity. 5s;-moz-transition:opacity. 5s}
. List>li:nth-child (6n+1) {clear:left}
. List>li:nth-child (6n+1): Before{border-left-color:transparent}
. List>li>a:hover:after{opacity:1;transform:translatey ( -50%);-webkit-transform:translatey (-50%);- Moz-transform:translatey (-50%)}
. list>li>a:hover>img{opacity:0}
</style>
<body>
<ul class= "List" >
<li><a href= "#" title= "qiaodan& #10乔丹" ></a></li>
<li><a href= "#" title= "qiaodan& #10乔丹" ></a></li>
<li><a href= "#" title= "qiaodan& #10乔丹" ></a></li>
<li><a href= "#" title= "qiaodan& #10乔丹" ></a></li>
<li><a href= "#" title= "qiaodan& #10乔丹" ></a></li>
<li><a href= "#" title= "qiaodan& #10乔丹" ></a></li>
<li><a href= "#" title= "qiaodan& #10乔丹" ></a></li>
<li><a href= "#" title= "qiaodan& #10乔丹" ></a></li>
<li><a href= "#" title= "qiaodan& #10乔丹" ></a></li>
<li><a href= "#" title= "qiaodan& #10乔丹" ></a></li>
<li><a href= "#" title= "qiaodan& #10乔丹" ></a></li>
<li><a href= "#" title= "qiaodan& #10乔丹" ></a></li>
<li><a href= "#" title= "qiaodan& #10乔丹" ></a></li>
<li><a href= "#" title= "qiaodan& #10乔丹" ></a></li>
<li><a href= "#" title= "qiaodan& #10乔丹" ></a></li>
<li><a href= "#" title= "qiaodan& #10乔丹" ></a></li>
<li><a href= "#" title= "qiaodan& #10乔丹" ></a></li>
<li><a href= "#" title= "qiaodan& #10乔丹" ></a></li>
</ul>
</body>
CSS pseudo-class objects before and after instances