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
;
}
|
用途二、插入图像 url()
1
2
3
4
|
p:before{
content
:
url
(images/dot.jpg);
margin-right
:
5px
;
}
|
用途三、配合: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元素各自占据一行,紧密排列
如果在第二个div里面再加入一个p元素,由于p元素自带有上下外边距各16px,会产生一个16px的间距
在这里就可以使用content配合:before来解决
1
2
3
4
|
#d
2:
before{
content
:
""
;
display
:table;
}
|
本文转自 frwupeng517 51CTO博客,原文链接:http://blog.51cto.com/dapengtalk/1868067