今天我们就来回顾一下前端css伪元素的知识，以及如何使用css伪元素来减轻压力的javascript，并制作一些脑洞大开的想法图形。先决条件伪元素伪元素是附加在选择器末尾的关键字，允许您修改所选元素特定部分的样式。伪元素主要包括：::first-letter首字母的样式::first-line文本首行的样式::before元素头部添加的装饰::after元素添加的装饰元素末尾::placeholder输入占位符号style::selection被选中元素的样式我个人认为伪元素可以理解为元素的装饰，可以给元素带来额外的附加样式，属于附加文档结构。伪类用于表示无法在CSS中轻松或可靠地检测到的元素的状态或属性。比如a标签的hover代表鼠标经过的样式，visited代表访问链接的样式。多用于描述元素状态变化时的样式，伪类主要有：:link:visited:hover:active:focus:lang(fr):not(s):root:first-child:last-child:only-child:nth-child(n):nth-last-child(n):first-of-type:last-of-type:only-of-type:nth-of-type(n):nth-last-of-type(n):empty:checked:enabled:disabled:target我们可以使用CSS伪类和伪元素来实现许多强大的视觉效果。这里我主要介绍伪元素。如果你对伪类或者其他CSS特性感兴趣，可以看看我之前的CSS。这篇文章非常全面。再来看看我们用纯css实现的图标库：当然，如果我们知道了上面制作图标的css原理，那么我们就可以实现更丰富更复杂的图形，甚至可以创建自己的图标库。下面介绍一下实现上述图标的途径和方法，并给出部分源码供大家学习。原理我们认识到上面的css图标是基于伪元素的，我们可以利用伪元素的::before、::after和content属性来给元素添加额外的视觉效果。上面我们也介绍了伪元素的概念和类型，接下来就让我们来实现吧~实现箭头的思路其实就是利用元素的::before伪元素画一个三角形，用css设置span样式为一行并进行布局定位：//less.arrow{position:relative;display:inline-block;line-height:0;background-color:#ccc;&.arrow-hor{width:16px;height:1px;}&.arrow-hor.right::before{content:'';position:absolute;top:-4px;right:-8px;border:4pxsolidtransparent;border-left:4pxsolid#ccc;}}//html这里实现了一个指向右箭头，我们可以用类似的方法实现左箭头，上下箭头，实现双向箭头，我们只需要添加一个::after伪类并做适当的定位即可。实现搜索图标实现搜索图标其实只需要一个圆和一条线，然后我们就用transform:ratate实现角度倾斜。具体实现如下：//less.search{position:relative;display:inline-block;width:12px;height:12px;border-radius:50%;border:1pxsolid#ccc;text-align:center;变换：旋转（-45度）；&::after{content：''；显示：内联块；width:1px;height:4px;background-color:#ccc;}}//html实现头像实现头像需要用到before和after伪元素为了分别制作角色的头部和身体之后，我们将使用css绘制一个椭圆来完成：//less.dot-pan{position:relative;display:inline-flex;width:60px;height:60px;line-高度：0；对齐项目：中心；边框半径：50%；背景颜色：#06c；变换：旋转（-90度）；&::before{content：''；显示：内联块；宽度：28px;height:40px;margin-left:-3px;border-radius:50%50%;flex-shrink:0;background-color:#fff;}&::after{content:'';display:inline-block;width:20px;height:20px;flex-shrink:0;border-radius:50%;background-color:#fff;}}//html位置图标的实现位置图标由一个圆形和一个三角形组成，如果我们想要更精致，我们可以使用另一个做固定点的伪元素：//less.locate-icon{position:relative;display:inline-block;width:50px;height:50px;border-radius:50%;background-color:#06c;&::before{content:'';position:absolute;display:inline-block;width:12px;height:12px;border-radius:50%;left:50%;top:50%;transform:translate(-50%,-50%);background-color:#fff;}&::after{content:'';margin-top:45px;display:inline-block;border:15pxsolidtransparent;border-top-color:#06c;}}//html微信图标图中的两只眼睛主要是用伪元素加box-shadow实现的，可以省去伪元素做小尾巴，至于如何实现不同形状的三角形，有不懂的可以和我交流。具体实现如下：//less.wechat-icon{display:inline-block;width:50px;height:50px;border-radius:50%;background-color:rgb(68,170,59);&::之前{内容：''；边距顶部：14px；位置：绝对；宽度：4px；高度：4px；边框半径：50%；背景颜色：#fff;框阴影：16px00#fff;}&::after{content:'';margin-top:42px;display:inline-block;border-width:6px10px6px10px;border-style:solid;边框颜色：transparent;border-top-color:rgb(68,170,59);transform:rotate(-147deg);}}//html也很好实现这里的tickicon简单，我们在伪元素的内容里打上勾，然后设置颜色和大小：//less.yes-icon{display:inline-flex;justify-content:center;align-items:center;width:48px;height:48px;background-color:green;border-radius:50%;&::after{content:'?';color:#fff;font-size:30px;font-weight:bold;}}//html实现眼睛（一般用于网站流量图标）主要是做一个椭圆加一个圆形伪元素：.view-icon{display:inline-flex;justify-content:center;align-items:center;width:58px;height:36px;background-color:#06c;border-radius:50%;&::after{content:'';display:inline-block;width:20px;height:20px;border-radius:50%;background-color:#fff;}}导航图标的原理类似，主要是绘制两个三角形，并使用pse的三角形udo-element覆盖主要元素就在底部：.gps-icon{position:relative;display:inline-flex;justify-content:center;align-items:center;border-width:30px15px30px15px;border-color:透明；边框样式：实心；边框底部颜色:#06c;transform:translate(10px,-16px)rotate(32deg);&::after{position:absolute;bottom:-48px;content:'';display:inline-block;border-width:10px38px30px38px;border-color:transparent;border-style:solid;border-bottom-color:#fff;}}心形图标的实现原理是用两个伪元素实现两个椭圆，旋转重合：.logo-x{position:relative;display:inline-flex;width:50px;height:50px;border-radius:50%;background-color:rgb(212,73,17);&::after{position:absolute;内容：'';left:10px;top:12px;display:inline-block;width:20px;height:30px;border-radius:50%;background-color:#fff;transform:rotate(135deg);}&::before{position:absolute;content:'';right:10px;top:12px;display:inline-block;width:20px;height:30px;border-radius:50%;background-color:#fff;transform:rotate(-135deg);}}ps图标也使用了伪元素，一个伪元素用于文字图形，一个伪元素用于遮罩，形成伪立体效果：.logo-ps{position:relative;display:inline-flex;justify-content:center;align-items:center;width:50px;height:50px;border-radius:8px;background-color:rgb(15,102,184);&::before{position:absolute;content:'';display:inline-block;width:50px;height:40px;background-color:rgba(255,255,255,.1);}&::after{position:absolute;content:'PS';字体大小:24px;display:inline-block;color:#fff;}}实现类似微信图标的气泡对话框：.logo-pp{display:inline-block;width:150px;height:50px;border-radius:8px;background-color:rgb(68,170,59);&::before{content:'等你下课！';margin-top:14px;margin-left:-33px;position:absolute;color:#fff;}&::after{content:'';margin-top:42px;display:inline-block;border-width:6px10px6px10px;border-style:solid;border-color:transparent;border-top-color:rgb(68,170,59);transform:rotate(-147deg)translate(-12px,6px);}}其他图标没有一个一个实现，原理类似，笔者之前用这个方案创建了100个图标库，成功应用到各个项目中，因为体积小不会造成额外的请求，所以比较实用，但是对于更多图形复杂，建议使用字体图标或svg、base64等方便
