css3之before、after伪类以及简单实现购物车图标

最新推荐文章于 2022-06-16 22:50:49 发布

等周末的爱码士

最新推荐文章于 2022-06-16 22:50:49 发布

阅读量878

点赞数

分类专栏：前端笔记文章标签： css 定位伪类 before after 购物车图标

本文链接：https://blog.csdn.net/sxjit/article/details/106167909

版权

前端笔记专栏收录该内容

18 篇文章 3 订阅

订阅专栏

“伪类”可以说是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>