css微元素-《CSS大法》利用伪元素实现超实用的图标库（附源码

今天我们来回顾一下后端CSS伪元素的知识，以及如何利用CSS伪元素来减轻JavaScript的压力，创建一些富有想象力的图形。

前知识伪元素

伪元素是附加到选择器末尾的关键字，允许您设置所选元素的特定部分的样式。 伪元素主要包括：

我个人认为伪元素可以理解为元素的装饰，可以给元素带来额外的样式，属于额外的文档结构。

伪类

用于表示 CSS 中难以轻松或可靠测量的元素的状态或属性。 例如a标签的hover表示键盘的样式，visited表示访问链接的样式，常用于描述元素的状态。 变化的风格和伪类别主要包括：

借助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: 4px solid transparent;        border-left: 4px solid #ccc;    }}
// html<span class="arrow arrow-hor right">

这实现了一个指向右侧的箭头。 我们还可以用类似的方式实现向左箭头、向上和向下箭头。 要实现单向箭头，我们只需要添加一个 ::after 伪类并将其放置在适当的位置即可。

实现搜索图标

其实只需要一个圆和一条线就可以实现搜索图标，然后我们就用transform:ratate来实现角度倾斜。 具体实现如下：

// less.search {    position: relative;    display: inline-block;    width: 12px;    height: 12px;    border-radius: 50%;    border: 1px solid #ccc;    text-align: center;    transform: rotate(-45deg);    &::after {        content: '';        display: inline-block;        width: 1px;        height: 4px;        background-color: #ccc;    }}// html<span class="search">

实现头像

为了实现头像css微元素，我们需要使用before和after伪元素分别制作角色的脸部和身体。 对于主体，我们将用 css 绘制一个椭圆：

// less.dot-pan {    position: relative;    display: inline-flex;    width: 60px;    height: 60px;    line-height: 0;    align-items: center;    border-radius: 50%;    background-color: #06c;    transform: rotate(-90deg);    &::before {        content: '';        display: inline-block;        width: 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<span class="search">

实现地点图标

位置图标由一个圆形和一个三角形组成。 如果我们想让它更豪华css微元素，我们可以使用伪元素来制作固定点：

// 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: 15px solid transparent;        border-top-color: #06c;    }}// html<span class="locate-icon mr-20">

实现Momo图标

图中的两只耳朵主要是利用伪元素和box-shadow来实现的。 这样可以省一个伪元素来做个小尾巴。 至于如何实现不同形状的三角形，如果有疑问可以和我交流。 具体实现如下：

// less.wechat-icon {    display: inline-block;    width: 50px;    height: 50px;    border-radius: 50%;    background-color: rgb(68, 170, 59);    &::before {        content: '';        margin-top: 14px;        position: absolute;        width: 4px;        height: 4px;        border-radius: 50%;        background-color: #fff;        box-shadow: 16px 0 0 #fff;    }    &::after {        content: '';        margin-top: 42px;        display: inline-block;        border-width: 6px 10px 6px 10px;        border-style: solid;        border-color: transparent;        border-top-color: rgb(68, 170, 59);        transform: rotate(-147deg);    }}// html<span class="wechat-icon mr-20">

实施勾选图标

这里也很简单，我们在伪元素的内容上打勾，然后设置颜色大小：

// 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<span class="yes-icon mr-20">

实现耳朵（一般用于网站流量图标）

主要是制作一个椭圆加一个正方形伪元素：

.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;    }}

导航图标

原理类似，主要思路是画两个三角形，用伪元素的三角形挡住主元素的顶部：

.gps-icon {    position: relative;    display: inline-flex;    justify-content: center;    align-items: center;    border-width: 30px 15px 30px 15px;    border-color: transparent;    border-style: solid;    border-bottom-color: #06c;    transform: translate(10px, -16px) rotate(32deg);    &::after {        position: absolute;        bottom: -48px;        content: '';        display: inline-block;        border-width: 10px 38px 30px 38px;        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;        content: '';        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';        font-size: 24px;        display: inline-block;        color: #fff;    }}

实现气泡对话框

类似于 Momo 图标：

.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: 6px 10px 6px 10px;        border-style: solid;        border-color: transparent;        border-top-color: rgb(68, 170, 59);        transform: rotate(-147deg) translate(-12px, 6px);    }}

由于篇幅原因，其他图标就不一一实现了。 原理是相似的。 笔者之前曾使用该方案制作过一套100个图标库，并已在各个项目中成功使用。 因为体积小不会引起额外的要求，所以越来越实用，但对于比较复杂的图形，为了方便，建议使用字体图标或者svg、base64等。

终于

如果你想了解更多css、javascript、nodeJS等后端知识和实践，欢迎加入我们公众号“趣聊前端”，一起学习讨论，探索前端的边界后端。