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


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

1
2
3
< div >
     < p >伪元素</ p >
</ div >
1
2
3
4
5
6
7
8
9
10
11
12
p:before{
     content : 'CSS3' ;
     color : #4bb ;
     font-weight : bold ;
     margin-right : 20px ;
     background : #f0f0f0 ;
     /*如果要设置宽高的话,就必须变成块级元素*/
     float : left ;
     display : block ;
     width : 50px ;
 
}

wKiom1gYLKeR6s50AABweibeXBo193.png


用途二、插入图像 url()

1
2
3
4
p:before{
     content : url (images/dot.jpg);
     margin-right : 5px ;
}

wKiom1gYLqnAXRlXAABYEZ8lpJs550.png


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

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


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

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

1
2
< div  id = "d1" ></ div >
< div  id = "d2" ></ div >
1
2
3
#d 1 ,#d 2 { width : 100px height : 100px ;}
#d 1 { background : red ;}
#d 2 { background : green ;}

此时,两个div元素各自占据一行,紧密排列

wKioL1gYMsHDXsS9AABlO4NLa8g991.png


如果在第二个div里面再加入一个p元素,由于p元素自带有上下外边距各16px,会产生一个16px的间距

wKiom1gYM97AeH6OAACsoDWaUhw841.png


在这里就可以使用content配合:before来解决

1
2
3
4
#d 2: before{
   content : "" ;
   display :table;
}

wKiom1gYNGihd1J-AACe2C7OCI0377.png