注:1伪元素与元素的区别:无法获取文本内容;
2.规范要求使用::实际使用:(支持IE8);
3.伪元素和本身元素在同一层级
1.after伪元素:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*.box::after {*/
.box:after {
content: "Hi ";
font-size: 36px;
display: block;
}
.box{
border: 1px solid red;
}
/*1.伪元素before与元素区别 : 无法获取文本内容*/
/*2.规范要求使用:: 实际使用: 支持IE8*/
</style>
</head>
<body>
<div class="box">
<span>Hello</span>
</div>
<script type="text/javascript">
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.box::before {
content: "Hi ";
font-size: 36px;
display: block;
}
.box{
border: 1px solid red;
}
</style>
</head>
<body>
<div class="box">
<span>Hello</span>
</div>
<script type="text/javascript">
</script>
</body>
</html>
3.before和after的具体使用(解决高度塌陷)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.wrapper{
background-color: yellow;
}
.wrapper:after{
content: "";
/*注意:通过伪元素清除浮动,必须设置 display: block*/
display: block;
clear: both;
}
.box{
width: 200px;
height: 200px;
background-color: blue;
float: left;
}
/*.clear-fix{*/
/*clear: both;*/
/*}*/
</style>
</head>
<body>
<div class="wrapper">
<div class="box"></div>
<!--<div class="clear-fix"></div>-->
</div>
<script type="text/javascript">
</script>
</body>
</html>
4.属性元素选择器和伪元素的综合使用:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
ul{
list-style: none;
margin: 0;
padding: 0;
}
[href$=".doc"]:before{
content: "";
display: inline-block;
width: 24px;
height: 24px;
background: url("img/icon_doc.png") no-repeat;
vertical-align: middle;
}
[href$=".xls"]:before{
content: "";
display: inline-block;
width: 24px;
height: 24px;
background: url("img/icon_xls.png") no-repeat;
vertical-align: middle;
}
[href$=".pdf"]:before{
content: "";
display: inline-block;
width: 24px;
height: 24px;
background: url("img/icon_pdf.png") no-repeat;
vertical-align: middle;
}
[href$=".mp3"]:before{
content: "";
display: inline-block;
width: 24px;
height: 24px;
background: url("img/icon_mpg.png") no-repeat;
vertical-align: middle;
}
[href$=".html"]:before{
content: "";
display: inline-block;
width: 24px;
height: 24px;
background: url("img/icon_xml.png") no-repeat;
vertical-align: middle;
}
span{
vertical-align: middle;
margin-left: .5em;
}
ul li{
line-height: 2;
}
</style>
</head>
<body>
<ul>
<li><a href="file/test.doc"><span>世界真其美妙.doc</span></a></li>
<li><a href="file/test.xls"><span>销售报表.xls</span></a></li>
<li><a href="file/test.pdf"><span>JS权威指南.pdf</span></a></li>
<li><a href="file/test.mp3"><span>南山南.mp3</span></a></li>
<li><a href="file/test.html"><span>test.html</span></a></li>
</ul>
<script type="text/javascript">
</script>
</body>
</html>
效果如下: