:before 的作用, 在子元素的最前面, 添加一个伪元素, 伪元素内容通过 content 控制,可以在content属性中写入文本内容，但是通常为空字符串。
:after 的作用, 在子元素的最后面, 添加一个伪元素, 伪元素内容通过 content 控制,可以在content属性中写入文本内容，但是通常为空字符串。
before 和 after 使用注意点:1. 必须设置 content2. 默认是行内元素如果要设置大小, 需要转换显示模式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.添加小图标
css代码
<style>* {padding: 0;margin: 0;box-sizing: border-box;}ul {width: 400px;height: 50px;border: 1px solid #000;margin: 150px auto ;text-align: center;}ul li {width: 25% ;height: 50px;list-style: none ;border: 1px solid #000;text-decoration: none ;float: left;line-height: 50px;position: relative;}.new:before {content: '' ;width: 36px;height: 23px;position: absolute ;top:0px ;right: 0px;background-image: url('./images/icon.png');}
</style>
复制代码效果
