如何灵活的运用before和after

经常我们在开发的时候，我们会经常遇到这样的小icon的切图，当然通常我们的做法都是直接找ui去要切图。最近在开发自己的项目的时候，才突然发现到 其实很多简单的视图都可以用原生css语言来完成。这里我就简单的给大家介绍几个 当作敲门砖用吧。

一、 聊天气泡三角形的实现

1、

新建一个div

<div class="__arrow"></div>
复制代码

2、

给气泡设置初始属性

.__arrow{
        display:inline-block;
        padding:10px;
        background:blue;
        color:#FFF;
        border-radius:8px;
        min-width: 50px;
        line-height: 24px;
        height: 24px;
        position:relative;
      }
复制代码

3、

用伪类before设置收到的消息

.__arrow:before{
        display:block;
        content:'';
        border-width:8px 8px 8px 8px;
        border-style:solid;
        border-color: transparent #ff4d4d transparent transparent;
        position:absolute;
        left:-16px;
        top:20%;
      }
复制代码

3、

用伪类after设置我的消息

.__arrow:after{
        display:block;
        content:'';
        border-width:8px 8px 8px 8px;
        border-style:solid;
        border-color: transparent transparent transparent #ff4d4d;
        position:absolute;
        left:100%;
        top:20%;
      }
复制代码

二、 加号

上图就是我想要的加号效果。

step1、

新建一个div

<div class="__plus"></div>
复制代码

step2、

写div写一个基础样式咯,首先先写一个边框

.__plus{
        width: 100px;
        height: 100px;
        color: black;
        transition: color .25s;
        position: relative;
        border: 1px solid
 }
复制代码

step3、

然后利用伪类before来写一个横：

.__plus::before{ 
        content: ''; 
        position: absolute; 
        left: 50%; 
        top: 50%; 
        width: 100px; 
        margin-left: -50px; 
        margin-top: -5px; 
        border-top: 10px solid;
      }
复制代码

step3、

同样，最后用伪类after来写一个竖：

.__plus::after {
        content: ''; 
        position: absolute; 
        left: 50%;
        top: 50%; 
        height: 100px;
        margin-left: -5px;
        margin-top: -50px; 
        border-left: 10px solid; 
      }
复制代码

这样一个简单的视图就完成了，这主要是通过那啥伪类来完成的这里有这么一种情况啊：就是是不是意味着每次我新建一个不同大小的视图就要重新写一遍呢？ 回答当然不是的。 （我是最讨厌写重复代码的人），我这里就用stylus做了一个简单的封装，具体的代码如下：

/**
  $size：视图的长度
  $plusWidth：加号的宽度
  $color：加号的颜色
 */
plus_icon($size, $plusWidth = 2px, $color = #fff)
  width: $size;
  height: $size;
  color: $color;
  transition: color .25s;
  position: relative;
  &::after
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    height: $size;
    margin-left: -($plusWidth/ 2);
    margin-top: -(0.5 *$size);
    border-left: $plusWidth solid;
  &::before
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: $size;
    margin-left: -(0.5 *$size);
    margin-top: -($plusWidth/ 2);
    border-top: $plusWidth solid;
复制代码

最后在使用的时候，直接简单的：

.add
  plus_icon(12px, 4px)
复制代码

就能看到效果了

三、 齿轮

关于齿轮呢？我会用到 box-shadow ,不清楚的小伙伴可以去看看。然后进入绘画流程

第一步、 画出同心圆

.__gear {
        width: 200px;
        height: 200px;
        box-shadow: 0 0 0 50px black inset, 0px 0px 0px 50px white inset;
        margin: 200px auto;
        position: relative;
        border-radius: 50%;
      }
复制代码

第二步、利用伪类before画出部分齿轮

.__gear::before {
        content: "";
        display: block;
        width: 20px;
        height: 20px;
        position: absolute;
        border-radius: 5px;
        box-shadow: 90px -16px 0 black, 90px 198px 0 black, -16px 90px 0 black, 198px 90px 0 black;
        -webkit-box-shadow: 90px -16px 0 black, 90px 198px 0 black, -16px 90px 0 black, 198px 90px 0 black;
        -moz-box-shadow: 90px -16px 0 black, 90px 198px 0 black, -16px 90px 0 black, 198px 90px 0 black;
      }
复制代码

第三步、利用伪类after画出剩余部分齿轮

代码如下：

.__gear::after   {
        content: "";
        display: block;
        width: 20px;
        height: 20px;
        position: absolute;
        border-radius: 5px;
        box-shadow: 90px -16px 0 black, 90px 198px 0 black, -16px 90px 0 black, 198px 90px 0 black;
        -webkit-box-shadow: 90px -16px 0 black, 90px 198px 0 black, -16px 90px 0 black, 198px 90px 0 black;
        -moz-box-shadow: 90px -16px 0 black, 90px 198px 0 black, -16px 90px 0 black, 198px 90px 0 black;
        transform-origin: 100px 100px;
        webkit-transform: rotate(45deg);
        -moz-transform: rotate(45deg);
        -o-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        transform: rotate(45deg);
      }
复制代码

同理，我也做了一个比较通用的方法，也是用stylus写的,代码如下：

gear_icon_common($size, $cicle_size, $tri_size)
  $_size01 = (($size/ 2) - ($tri_size/ 2))
  $_size02 = (-0.8 *$tri_size)
  $_size03 = ($size - ($tri_size/ 5))

  content: "";
  display: block;
  width: $tri_size;
  height: $tri_size;
  position: absolute;
  border-radius: $tri_size / 5;
  box-shadow: $_size01 $_size02 0 black, $_size01 $_size03 0 black, $_size02 $_size01 0 black, $_size03 $_size01 0 black;
  -webkit-box-shadow: $_size01 $_size02 0 black, $_size01 $_size03 0 black, $_size02 $_size01 0 black, $_size03 $_size01 0 black;
  -moz-box-shadow: $_size01 $_size02 0 black, $_size01 $_size03 0 black, $_size02 $_size01 0 black, $_size03 $_size01 0 black;

/**
  $size:整个视图的宽度
  $cicle_size: 环的宽度
  $tri_size: 齿轮的宽度
  $Hcolor:环/齿轮的颜色
  $Icolor:内圆的颜色
*/
gear_icon($size, $cicle_size, $tri_size, $Hcolor = #000, $Icolor = #fff)
  width: $size;
  height: $size;
  box-shadow: 0 0 0 $cicle_size $Hcolor inset, 0px 0px 0px $cicle_size $Icolor inset;
  margin: $size auto;
  position: relative;
  border-radius: 50%;
  &::after
    gear_icon_common($size, $cicle_size, $tri_size)
  &::before
    gear_icon_common($size, $cicle_size, $tri_size)
    transform-origin: ($size/ 2) ($size/ 2)
    webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg)
复制代码

在使用的时候就直接使用：

.__artical_content_setting
  gear_icon(14px, 4px, 3px)
复制代码

写在最后

最近我发现我发表在简书的文章有很多人评论，首先我很开心能被大家看到，其次我简单说明一下： 简书上面很多的技术类文章呢？我都是当作读书笔记来做的，很多用词用句不是很严谨，基本都是用到了，觉得不错就写下来了。

其次就是最近买了一个服务器，想自己独立搭建一个包含后台、前端、android端、小程序端和微信公众号多端通用的一个写作平台。因为云部署、后台的知识链比较的薄弱，加上还要定时去各大媒体投递一些非技术类的文章。关于本站的技术类文章呢？就不会定时的更新，但还是会写一点在开发中遇到的一些有趣的东西。

最后想说点心里话，因为现在工作也不是很轻松，外加上自己的技术内涵比较薄弱，一般主流的时间和精力都会用在工作、学习和完善自己的想法上面，可能在某些用词用句上面没做很大的斟酌，希望大家海涵（主要也很讨厌那些装逼的人，说一些不太好的装逼的话 有点恶心）。至于有人私聊我 关于没看懂或者描述不清楚的地方呢？我很乐意的去为您解决问题，但是我呢，不会有太多的时间去看这个简书的 我建议是加本人的微信来深入交流，当然这段时间过了之后 我还是会花大精力在运营上面的。