本文是作者从别的网站和文章学习了解的知识，简单做了个笔记，想要学习更多的可以参考这里：【css进阶】伪元素的妙用--单标签之美，奇思妙想
（1、normal）
（2、hover）
（3、active）
/*建立一个带圆角矩形*/
.pesudo{
position: relative;
margin-top:80px;
width: 120px;
height:120px;
border-radius:1em;
background:#00aabb;
cursor:pointer;
}
/*用before设置好一个hover的状态*/
.pesudo:before{
position: absolute;
display:block;
top:; right:; bottom:; left:;
z-index:;
border-radius:1em;
background:rgba(0,0,0,.1);
}
/*当元素hover的时候就出现设置好的before*/
.pesudo:hover:before{
content:"";
}
/*用after设置好一个active的状态*/
.pesudo:after{
position: absolute;
top:; right:; bottom:; left:;
z-index:;
border-radius:1em;
background:rgba(255,255,255,.2);
}
/*当元素active得而时候就出现设置好的after*/
.pesudo:active:after{
content:"";
}
ok，然后就轻松实现了