《css大法》之使用伪元素实现超实用的图标库（附源码

今天我们来复盘一下前端中css伪元素的知识以及如何用css伪元素来减轻javascript的压力，做出一些脑洞大开的图形。

预备知识

伪元素

伪元素是一个附加至选择器末的关键词，允许你对被选择元素的特定部分修改样式。伪元素主要有：

::first-letter 第一个字母的样式
::first-line 首行文字的样式
::before 元素头部添加的修饰
::after 元素尾部添加的修饰
::placeholder input的占位符样式
::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文章，写的很全面：

用css3实现惊艳面试官的背景即背景动画（高级附源码）

css3实战汇总（附源码）

正文

先看看我们用纯css实现的图标库：

当然，如果我们知道了做出如上图标的css原理，那么我们就可以实现更加丰富复杂的图形，甚至可以打造自己的图标库。

接下来我会介绍实现如上图标的方式和方法，并给出部分源码，方便大家学习。

原理

我们实现如上css图标是基于伪元素的，可以利用伪元素的::before和::after和content属性来为元素添加额外视觉效果，我们在上文中也介绍了伪元素的概念和类型，接下来让我们来实现它吧～

实现箭头

思路其实就是利用元素的::before伪元素画一个三角形，用css设置span样式为一条线并进行布局定位：

1// less
2.arrow {
3    position: relative;
4    display: inline-block;
5    line-height: 0;
6    background-color: #ccc;
7    &.arrow-hor {
8        width: 16px;
9        height: 1px;
10    }
11    &.arrow-hor.right::before {
12        content: '';
13        position: absolute;
14        top: -4px;
15        right: -8px;
16        border: 4px solid transparent;
17        border-left: 4px solid #ccc;
18    }
19}
20
21// html
22<span class="arrow arrow-hor right"></span>

这样就实现了一个指向右的箭头，我们用类似的方法也可以实现左箭头，上下箭头，实现双向箭头只需要加一个::after伪类并做适当定位就好了。

实现搜索图标

实现搜索图标实际上只需要一个圆和一根线，然后我们会用transform：ratate来实现角度倾斜，具体实现如下：

1// less
2.search {
3    position: relative;
4    display: inline-block;
5    width: 12px;
6    height: 12px;
7    border-radius: 50%;
8    border: 1px solid #ccc;
9    text-align: center;
10    transform: rotate(-45deg);
11    &::after {
12        content: '';
13        display: inline-block;
14        width: 1px;
15        height: 4px;
16        background-color: #ccc;
17    }
18}
19// html
20<span class="search"></span>

实现头像

实现头像我们要利用before和after伪元素，分别做人物头部和身体，身体我们会用css画一个椭圆来做：

1// less
2.dot-pan {
3    position: relative;
4    display: inline-flex;
5    width: 60px;
6    height: 60px;
7    line-height: 0;
8    align-items: center;
9    border-radius: 50%;
10    background-color: #06c;
11    transform: rotate(-90deg);
12    &::before {
13        content: '';
14        display: inline-block;
15        width: 28px;
16        height: 40px;
17        margin-left: -3px;
18        border-radius: 50% 50%;
19        flex-shrink: 0;
20        background-color: #fff;
21    }
22
23    &::after {
24        content: '';
25        display: inline-block;
26        width: 20px;
27        height: 20px;
28        flex-shrink: 0;
29        border-radius: 50%;
30        background-color: #fff;
31    }
32}
33// html
34<span class="search"></span>

实现地点图标

地点图标由一个圆和一个三角形组成，如果要做的精致一点，我们可以再用一个伪元素来做一个定点：

1// less
2.locate-icon {
3    position: relative;
4    display: inline-block;
5    width: 50px;
6    height: 50px;
7    border-radius: 50%;
8    background-color: #06c;
9    &::before {
10        content: '';
11        position: absolute;
12        display: inline-block;
13        width: 12px;
14        height: 12px;
15        border-radius: 50%;
16        left: 50%;
17        top: 50%;
18        transform: translate(-50%, -50%);
19        background-color: #fff;
20    }
21    &::after {
22        content: '';
23        margin-top: 45px;
24        display: inline-block;
25        border: 15px solid transparent;
26        border-top-color: #06c;
27    }
28}
29// html
30<span class="locate-icon mr-20"></span>

实现微信图标

图中2个眼睛主要是用到一个伪元素加上box-shadow来实现，这样可以节约一个伪元素用来做小尾巴，至于如何实现不同形状的三角形，如果有不懂的可以和我交流，具体实现如下：

1// less
2.wechat-icon {
3    display: inline-block;
4    width: 50px;
5    height: 50px;
6    border-radius: 50%;
7    background-color: rgb(68, 170, 59);
8    &::before {
9        content: '';
10        margin-top: 14px;
11        position: absolute;
12        width: 4px;
13        height: 4px;
14        border-radius: 50%;
15        background-color: #fff;
16        box-shadow: 16px 0 0 #fff;
17    }
18    &::after {
19        content: '';
20        margin-top: 42px;
21        display: inline-block;
22        border-width: 6px 10px 6px 10px;
23        border-style: solid;
24        border-color: transparent;
25        border-top-color: rgb(68, 170, 59);
26        transform: rotate(-147deg);
27    }
28}
29// html
30<span class="wechat-icon mr-20"></span>

实现对勾图标

这里也很简单，我们用伪元素的content里放置一个勾号，然后设置颜色大小就好啦：

1// less
2.yes-icon {
3    display: inline-flex;
4    justify-content: center;
5    align-items: center;
6    width: 48px;
7    height: 48px;
8    background-color: green;
9    border-radius: 50%;
10    &::after {
11        content: '✓';
12        color: #fff;
13        font-size: 30px;
14        font-weight: bold;
15    }
16}
17// html
18<span class="yes-icon mr-20"></span>

实现眼睛（一般用于网站访问量图标）

主要是做椭圆加上一个圆形的伪元素：

1.view-icon {
2    display: inline-flex;
3    justify-content: center;
4    align-items: center;
5    width: 58px;
6    height: 36px;
7    background-color: #06c;
8    border-radius: 50%;
9    &::after {
10        content: '';
11        display: inline-block;
12        width: 20px;
13        height: 20px;
14        border-radius: 50%;
15        background-color: #fff;
16    }
17}

导航图标

原理类似，主要思想是画两个三较形，用伪元素的三角形遮住主元素底部即可：

1.gps-icon {
2    position: relative;
3    display: inline-flex;
4    justify-content: center;
5    align-items: center;
6    border-width: 30px 15px 30px 15px;
7    border-color: transparent;
8    border-style: solid;
9    border-bottom-color: #06c;
10    transform: translate(10px, -16px) rotate(32deg);
11    &::after {
12        position: absolute;
13        bottom: -48px;
14        content: '';
15        display: inline-block;
16        border-width: 10px 38px 30px 38px;
17        border-color: transparent;
18        border-style: solid;
19        border-bottom-color: #fff;
20    }
21}

实现心形图标

原理就是用两个伪元素实现两个椭圆，旋转重合即可：

1.logo-x {
2    position: relative;
3    display: inline-flex;
4    width: 50px;
5    height: 50px;
6    border-radius: 50%;
7    background-color: rgb(212, 73, 17);
8    &::after {
9        position: absolute;
10        content: '';
11        left: 10px;
12        top: 12px;
13        display: inline-block;
14        width: 20px;
15        height: 30px;
16        border-radius: 50%;
17        background-color: #fff;
18        transform: rotate(135deg);
19    }
20    &::before {
21        position: absolute;
22        content: '';
23        right: 10px;
24        top: 12px;
25        display: inline-block;
26        width: 20px;
27        height: 30px;
28        border-radius: 50%;
29        background-color: #fff;
30        transform: rotate(-135deg);
31    }
32}

ps图标

这个也是用伪元素，一个伪元素用来做文字图形，一个用来做遮罩，来形成伪立体感：

1.logo-ps {
2    position: relative;
3    display: inline-flex;
4    justify-content: center;
5    align-items: center;
6    width: 50px;
7    height: 50px;
8    border-radius: 8px;
9    background-color: rgb(15, 102, 184);
10    &::before {
11        position: absolute;
12        content: '';
13        display: inline-block;
14        width: 50px;
15        height: 40px;
16        background-color: rgba(255, 255, 255, .1);
17    }
18    &::after {
19        position: absolute;
20        content: 'PS';
21        font-size: 24px;
22        display: inline-block;
23        color: #fff;
24    }
25}

实现气泡对话框

和微信图标类似：

1.logo-pp {
2    display: inline-block;
3    width: 150px;
4    height: 50px;
5    border-radius: 8px;
6    background-color: rgb(68, 170, 59);
7    &::before {
8        content: '等你下课哦！';
9        margin-top: 14px;
10        margin-left: -33px;
11        position: absolute;
12        color: #fff;
13    }
14    &::after {
15        content: '';
16        margin-top: 42px;
17        display: inline-block;
18        border-width: 6px 10px 6px 10px;
19        border-style: solid;
20        border-color: transparent;
21        border-top-color: rgb(68, 170, 59);
22        transform: rotate(-147deg) translate(-12px, 6px);
23    }
24}

由于篇幅原因，其他的图标就不一一实现了，原理都类似，笔者之前曾利用这个方案做过一套100个图标的库，成功应用于各个项目中，由于体积小不会造成额外请求，所以更加实用，但更复杂的图形就为了方便还是建议用字体图标或者svg，base64等。

最后

如果想了解更多css，javascript，nodeJS等前端知识和实战，欢迎在公众号《趣谈前端》加入我们一起学习讨论，共同探索前端的边界。