利用伪类:before&&:after实现图标库图标

一、实现如下效果

二、代码实现思路

图案一源码　

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8" />
 5         <title>伪类绘图</title>
 6         <style>
 7             .button {
 8                 display: inline-block;
 9                 position: relative;
10                 font-size: 30px;
11                 width: 90px;
12                 height: 90px;
13                 background-color: #00aabb;
14                 cursor: pointer;
15             }
16             .button:after, .button:before {
17                 content: "";
18                 position: absolute;
19                 left: 50%;
20                 top: 50%;
21                 transform: translate(-50%, -50%);
22                 box-shadow: 0 0 0 .5px rgba(177,177,177,.8);
23                 /*box-shadow: inset 0 0 0 1em;内阴影*/ 
24                 background: #FFF;
25             }
26             .button:before {
27                 height: 1.5em;
28                 width: 2px;
29             }
30             .button:after {
31                 width: 1.5em;
32                 height: 2px;
33             }
34         </style>
35     </head>
36     <body>
37         <div class="button"></div>
38     </body>
39 </html>

View Code