content属性浏览器支持情况,兼容到IE8浏览器,IE7及以下不支持


用途一、配合:before及:after伪元素插入文本

    

伪元素

p:before{
    content:'CSS3';
    color:#4bb;
    font-weight:bold;
    margin-right:20px;
    background:#f0f0f0;
    /*如果要设置宽高的话,就必须变成块级元素*/
    float:left;
    display:block;
    width:50px;

}


用途二、插入图像 url()

p:before{
    content:url(p_w_picpaths/dot.jpg);
    margin-right:5px;
}

content属性的4种用途_第1张图片


用途三、配合:after 清除浮动

.clearfix:after{
    content:'';
    display:block;
    height:0;
    clear:both;
    overflow:hidden;
    visibility:hidden;
}
/*为兼容IE6,IE7,因为ie6,ie7不能用after伪类。加上下面代码*/
.clearfix{zoom:1}


用途四、配合:before 解决上外边距溢出

在没有对全局css作样式重置的情况下,会出现这么一个问题