CSS伪类对象before和after的实例

浏览数：27 / 时间：2015年06月09日

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>html5</title>

<style>
body{ font-size:12px; font-family:"微软雅黑",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%;padding: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:opacity .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>
</head>
<body>
<ul class="list">
<li><a href="#" title="QIAODAN&#10乔丹"><img src="http://qiaodan.com/images/shoplistimg.png" /></a></li>
<li><a href="#" title="QIAODAN&#10乔丹"><img src="http://qiaodan.com/images/shoplistimg.png" /></a></li>
<li><a href="#" title="QIAODAN&#10乔丹"><img src="http://qiaodan.com/images/shoplistimg.png" /></a></li>
<li><a href="#" title="QIAODAN&#10乔丹"><img src="http://qiaodan.com/images/shoplistimg.png" /></a></li>
<li><a href="#" title="QIAODAN&#10乔丹"><img src="http://qiaodan.com/images/shoplistimg.png" /></a></li>
<li><a href="#" title="QIAODAN&#10乔丹"><img src="http://qiaodan.com/images/shoplistimg.png" /></a></li>
<li><a href="#" title="QIAODAN&#10乔丹"><img src="http://qiaodan.com/images/shoplistimg.png" /></a></li>
<li><a href="#" title="QIAODAN&#10乔丹"><img src="http://qiaodan.com/images/shoplistimg.png" /></a></li>
<li><a href="#" title="QIAODAN&#10乔丹"><img src="http://qiaodan.com/images/shoplistimg.png" /></a></li>
<li><a href="#" title="QIAODAN&#10乔丹"><img src="http://qiaodan.com/images/shoplistimg.png" /></a></li>
<li><a href="#" title="QIAODAN&#10乔丹"><img src="http://qiaodan.com/images/shoplistimg.png" /></a></li>
<li><a href="#" title="QIAODAN&#10乔丹"><img src="http://qiaodan.com/images/shoplistimg.png" /></a></li>
<li><a href="#" title="QIAODAN&#10乔丹"><img src="http://qiaodan.com/images/shoplistimg.png" /></a></li>
<li><a href="#" title="QIAODAN&#10乔丹"><img src="http://qiaodan.com/images/shoplistimg.png" /></a></li>
<li><a href="#" title="QIAODAN&#10乔丹"><img src="http://qiaodan.com/images/shoplistimg.png" /></a></li>
<li><a href="#" title="QIAODAN&#10乔丹"><img src="http://qiaodan.com/images/shoplistimg.png" /></a></li>
<li><a href="#" title="QIAODAN&#10乔丹"><img src="http://qiaodan.com/images/shoplistimg.png" /></a></li>
<li><a href="#" title="QIAODAN&#10乔丹"><img src="http://qiaodan.com/images/shoplistimg.png" /></a></li>
</ul>
</body>
</html>