一、使用方法
在元素内部的开始位置和结束位创建一个元素，该元素为行内元素，且必须要结合content属性使用。
/*content属性不能少*/
div::before {
content:"开始";
}
div::after {
content:"结束";
}
二、相关特性
2.1 本质是一个盒子
可以修改::before和::after的样式：
<!DOCTYPE html>
<html>
<head>
<title>after和before</title>
<style>
div::before {
content: '我';
width: 200px;
height: 200px;
background-color: pink;
}
div::after {
content: '找工作'
}
</style>
</head>
<body>
<div>今年</div>
</body>
</html>
显示结果
从上图中可以看到"我"的背景颜色已经修改成功了，但是高宽属性没有变化，所以我们可以知道，::before和::after默认为行内元素，我们可以通过修改display来转换格式。
2.2 after和before用来清除浮动
.clearfix:after {
content: ".";
display: block;
height: 0;
clear both;
visibility:hidden;
}
.clearfix:before,.clearfix:after {
content:"";
display:table; /* 这句话可以触发BFC BFC可以清除浮动,BFC我们后面讲 */
}
.clearfix:after {
clear:both;
}
网友评论