1、:before和:after伪元素
:before和:after,用于在修饰元素的内部最前端插入一个元素，或者最后段插入一个元素。
2、常见的应用
2.1 内容生成
源代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>内容生成</title>
<style type="text/css">
p:before{
content: '"';
color: red;
}
p:after{
content: '"';
color: red;
}
</style>
</head>
<body>
<p>这个一个p元素</p>
<p>这个一个p元素</p>
<p>这个一个p元素</p>
<p>这个一个p元素</p>
<p>这个一个p元素</p>
</body>
</html>
运行效果：
红色的双引号，是通过伪元素生成的。
内容生成
2.2 清除浮动的影响
源代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>内容生成</title>
<style type="text/css">
.wrap{
border: 1px solid red;
}
/*IE8必须用 *zoom:1;**/
.wrap{*zoom:1;}
.wrap:after{
display:block;
content:"";
height:0;
clear:both;
overflow:hidden;
visibility:hidden;
}
.left{
width: 100px;
height: 100px;
float: left;
background: blue;
}
</style>
</head>
<body>
<div class="wrap">
<div class="left">
</div>
</div>
</body>
</html>
运行效果:
清楚浮动
2.3 让大小不固定图片垂直居中
源代码：
素材图片一张：
bg.png
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>内容生成</title>
<style type="text/css">
.wrap{
width: 400px;
height: 400px;
border: 1px solid red;
margin: 20px auto;
font-size:0;
*font-size:300px;
text-align:center;
}
.wrap img{
vertical-align: middle;
}
.wrap:after{
display:inline-block;
width:0;
height:100%;
content:"";
vertical-align:middle;
overflow:hidden;
}
</style>
</head>
<body>
<div class="wrap">
</div>
</body>
</html>
运行效果：
image.png
网友评论