利用css3伪元素实现加号、减号、对号小图标效果

目前图标：加号、减号、对号、向下箭头、实心三角箭头

前两个图标都加了hover状态和禁用状态效果

1、加号

通过定位以及::before和::after相结合实现

效果：

.addBtn{
    display: inline-block;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background-color: #D4D7D7;
    position: relative;
    cursor: pointer;
    &:hover{  // hover状态
      background-color: #00C8C8;
    }
    &.disabledBtn{ // 禁用状态
      background-color: #E4E4E4;
      cursor: not-allowed;
    }
  }
  .addBtn::before{ // 加号的横线
    content: '';
    width: 8px;
    height: 2px;
    background-color: #fff;
    position: absolute;
    top: 7px;
    left: 4px;
  }
  .addBtn::after{ // 加号的竖线
    content: '';
    width: 2px;
    height: 8px;
    background-color: #fff;
    position: absolute;
    top: 4px;
    left: 7px;
  }

2、减号

通过定位以及::before实现

效果：

  .subBtn{
    display: inline-block;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background-color: #D4D7D7;
    position: relative;
    cursor: pointer;
    &:hover{
      background-color: #00C8C8;
    }
    &.disabledBtn{
      background-color: #E4E4E4;
      cursor: not-allowed;
    }
  }
  .subBtn::before{
    content: '';
    width: 8px;
    height: 2px;
    background-color: #fff;
    position: absolute;
    top: 7px;
    left: 4px;
  }

3、对号

对号用到了transform和定位

效果：

  .checkMark{
      display: inline-block;
      width: 16px;
      height: 16px;
      border-radius: 50%;
      background-color: #D4D7D7;
      position: relative;
      cursor: pointer;
      &:hover{  // hover状态
        background-color: #00C8C8;
      }
      &.disabledBtn{ // 禁用状态
        background-color: #E4E4E4;
        cursor: not-allowed;
      }
    }
    .checkMark::before{
      content: '';
      width: 6px;
      height: 1px;
      background-color: #fff;
      position: absolute;
      top: 10px;
      left: 2px;
      transform: rotate(45deg);
    }
    .checkMark::after{
      content: '';
      width: 11px;
      height: 1px;
      background-color: #fff;
      position: absolute;
      top: 8px;
      left: 5px;
      transform: rotate(-45deg);
    }

4、向下箭头

效果

  .arrow{
    width: 26px;
    height: 26px;
    // 空心三角
    &::before{
      content: '';
      display: inline-block;
      border-top: 2px solid;
      border-right: 2px solid;
      width: 12px;
      height: 12px;
      border-color: #97A2B6;
      transform: rotate(-225deg);
      // margin: 5px auto auto 10px
    }
  }

5、实心三角箭头

效果：

  .arrow{
    width: 26px;
    height: 26px;
    // 实心三角
    &::before, &::after{
      content: '';
      width: 0;
      height: 0;
      border: 6px solid transparent;
      border-bottom-color: #97A2B6;
    }
    &::before{
      border-bottom-color: white;
    }
  }