:before 的作用, 在子元素的最前面, 添加一个伪元素, 伪元素内容通过 content 控制,可以在content属性中写入文本内容，但是通常为空字符串。

before 和 after 使用注意点:    1. 必须设置 content    2. 默认是行内元素        如果要设置大小, 需要转换显示模式        display: block/inline-block;        或者定位position: absolute/fixed;           3. before 和 after 都是伪元素, 不是真实存在的元素, 不能添加 hover  且 不能通过 js 进行获取   before 和 after 的使用场景:    1. 清除浮动      2. 添加遮罩层 或者 添加小图标复制代码

1.清除浮动

.clearfix:after {  content: "";  display: block;  /* 清除浮动元素造成的影响 */  clear: both;   height: 0;  line-height: 0;  visibility: hidden;}复制代码

2.添加小图标

复制代码

效果