“伪类”可以说是css中的特效元素，按本人亲身经历来看，在不是很系统的自学过程中常常会忽略伪类。这里带大家快速了解:before和:after伪类和简单上手购物车图标的demo。
定义：:before和:after伪类的作用就是在指定的元素的内容之前或之后插入一个元素。
重点：插入的该元素有自带content属性，可直接指定元素内容，也可以赋空值””。
其实在我的上一篇关于实现爱心图案的文章中就已经用到了伪类，就是那样的一种使用方式。除此之外，最常用的用法之一就是利用:after伪类清除浮动：
.div {
content: "";
clear: both;
}
这应该都不陌生，在元素设置了
float
浮动后，当需要恢复间距换行时，初级玩家会给个空div设置
clear: both;
来清除浮动，而高级玩家会像上面一样用:after伪类进行清除，这样写代码比较专业、简洁明了。
接下来讲讲最经典的伪类案例购物车图标了。利用伪类静态实现购物车图标是目前最简单的方式了，代码大家一看就懂，注意两点：
1、结构逻辑要理清，当选中元素的伪类要绝对定位，最好习惯外层用一个div包裹选中元素并设置相对定位；
2、content属性不要忘；
<style>
.shopCarCon {
width: 50px;
position: relative;
}
.shopCar {
margin-top: 20px;
}
.shopCar::after { //选中元素after伪类
content: "1"; //伪类元素文本内容
width: 16px;
height: 20px;
position: absolute; //定位显示并进行位置调整
right: 0;
top: -5px;
line-height: 20px;
text-align: center;
border-radius: 50%;
background-color: red;
color: white;
font-size: 13px;
}
</style>
<body>
<div class="shopCarCon"> //外层div
<div class="shopCar"> //选中元素
<img src="./static/购物车2.png" alt="">
</div>
</div>
</body>
效果图如下：
版权声明：本文为sxjit原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。