css伪元素before和after用法详解
要想了解伪元素before和after到底是什么，首先就应该打开编译器敲入代码并在浏览器运行检查
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.box{
width: 300px;
height: 300px;
background: pink;
margin: 100px auto;
position: relative;
}
.box::before{
content: "我是before";
background: yellowgreen;
width: 100px;
height: 100px;
}
.box::after{
content: "我是after";
background: yellow;
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div class="box">
box
</div>
</body>
</html>由上图可知，伪元素before是.box中的第一个子元素，伪元素after是.box中的最后一个子元素，且由于二者都设置了宽高并未生效，且并未独占一行，由此可知，伪元素before和after都属于行内元素。
下面，我总结了几个伪元素before和after的几个重点，如果大家有疑问可以自行验证，或者在评论区留言。
1、伪元素before和after的content属性必须填写，可设置为空串；
2、伪元素before和after的content属性中的文本是不能被搜索引擎获取的；
3、伪元素before和after属于行内元素，并可通过设置display属性转换为块元素或者行内块元素；
关于伪元素的应用：
解决浮动元素导致其父元素高度塌陷的问题
.clearfix:after {
content:"";
display: block;
clear: both;
}给高度塌陷的父元素添加类名clearfix即可。
如果本文有任何错误，欢迎各位批评指正，或者在评论区留下你们的学习建议或看法，谢谢。