after顾名思义是在元素后面的意思,实质是在元素之后添加内容。
这个伪元素允许制作人员在元素内容的最后面插入生成内容,需要和content属性一起使用,设置在对象后发生的内容。默认地,这个伪元素是inline行内元素,不过可以使用属性 display 改变这一点。
用过比较多次,但总是忘了具体怎么写,在这里做个笔记,直接贴源码代码供参考
<!DOCTYPE html>
<html>
<head>
<title>after伪类清除浮动测试</title>
<meta charset="utf-8">
<style type="text/css">
ul,ol,li{
list-style: none;
padding: 0px;
margin: 0px;
}
.page ul li{
float: left;
width: 100px;
height: 35px;
margin-left: 20px;
line-height: 35px;
font-size: 14px;
text-align: center;
color: #fff;
background: #ca1928;
}
.page ul::after{
content: '';
display: block;
clear: both;
zoom:1;
}
</style>
</head>
<body>
<div class="page">
<ul>
<li>新闻中心</li>
<li>公司简介</li>
<li>产品中心</li>
</ul>
<div class="content">
<p>这是具体内容这是具体内容这是具体内容这是具体内容这是具体内容这是具体内容这是具体内容这是具体内容</p>
</div>
</div>
</body>
</html>
效果图: