伪元素的使用

关于伪元素:after和:before的用法

内容

首先伪元素在真正页面元素内部之前和之后添加内容，例：

<style type="text/css">
    p:before {  
        content:'haha!'
    }p:after {  
        content:'you are welcome'
    }
</style>

等同于：haha!前后都有you are welcome!

清除浮动

其次比较常见的就是用父元素用:after清除浮动，这是目前推荐的清除浮动的方式。

<style type="text/css">  
.content {    
    background-color: gray;    
    border: solid 1px black;    
}  
.content img {    
    float: left;    
}  
.content p {    
    float: right;    
}  
.clear:after {    
    content: "020";          //看不见的空格或者点    
    display: block;    
    height: 0;    
    clear: both;    
    visibility: hidden;    
}  
.clear {    
    zoom: 1;                 //浏览器兼容  
}
</style>
<div class="content clear">  
    <img src="1.jpg" />
</div>

然后有时会遇到图片加载不出来导致不美观的问题，用attr加伪元素可实现美化图片的功能。
最后是可以实现图标放大缩小的特效。