CSS ::before和::after用来做复选框

::before和::after是干嘛的呢

::before选择器在被选元素的内容前面插入内容，:after 选择器在被选元素的内容后面插入内容。

它们都必须使用content 属性来指定要插入的内容（content : "内容，可以为空值";）。如果没有content属性来指定内容的话将无效，

来看例子：

    

看见没，：：before直接变没了，同理，after就不演示了效果都是一样的

如果我没说明白的话可以去看看文档http://www.css88.com/book/css/selectors/pseudo-element/before.htm也可以参考这个回答https://www.zhihu.com/question/20436746

了解到before是干嘛的，以及它的必须条件现在就开始用它来做一个复选框的选中和未选中效果。

首先

新建一个首先类型为checkbox的input标签,然后在他的下面在建立一个label标签用for属性去绑定前面新建立的checbox标签

<input  id="btn-checkboxId" class="btn-checkbox" " type="checkbox" />

<label for="btn-checkboxId"></label>

这时候会看到有一个复选框出来了就是它，但是这不好看啊，于是乎用上述介绍过的样式来做一个复选框出来

先将这个复选框隐藏掉，然后用before做一个自己想要的复选框出来，先给label定位，方便后续插入的样式对label进行定位

.btn-checkbox{           

   display:none;

}

.btn-checkbox+label::before{

          position:absolute;
  display:block;
  width:20px;
  height:20px;
  content:'';
  border:1px solid #c0c0c0;
  border-radius:3px;

}

OK,现在的效果应该是这样的

复选框是出来了，但是不能点啊，怎么办呢。咱们再拿after去做个点击之后的

.btn-checkbox+label:after{

          position:absolute;
 top:4px;
 left:4px;
 display:none;
 width:13px;
 height:6px;
 content:'';
 border-bottom:1px solid white;
  border-left:1px solid white;
 transform:rotate(-46deg)
}
.btn-checkbox:checked+label::before{
          background:#3e97eb;
 border:#3e97eb;
}
.btn-checkbox:checked+label:after{
          display:block;
}

效果应该就是这样了.

全部代码附上

<input  id="btn-checkboxId" class="btn-checkbox" " type="checkbox" />

<label for="btn-checkboxId"></label>

.btn-checkbox {
      position: absolute;
      display: none;
}
 .btn-checkbox + label {
      position: relative; /*设置定位，好让后续插入的样式进行定位*/
}
.btn-checkbox + label:after { /*这个是选中之后的√，先设置为隐藏，等选中后在将这些属性显示出来*/
    position: absolute;/*定位元素，调整在复选框的位置*/
    top: 4px;
    left: 4px;
    display: none;/*先将它隐藏，等点击之后在放出来*/
    width: 13px;/*设置√的高度，就是√的右半部分*/
    height: 6px;/*设置√的高度，就是√的左半部分*/
    content: '';/*必设属性，不设不生效*/
    border-bottom: 2px solid white;/*设置√的颜色*/
    border-left: 2px solid white;/*设置√的颜色*/
    box-sizing: border-box;/*宽和高只有13*6，设置的下边框和左边框不会撑大宽和高*/
    transform: rotate(-46deg);/*旋转成一个√√*/
}
.btn-checkbox + label:before {/*这个是没选中的*/
    position: absolute;/*定位元素，调整复选框的位置*/
    display:block;/*设置为一个块级元素*/
    width: 20px;
    height: 20px;
    content: '';/*必设属性，不设不生效*/
    border: 1px solid #c0c0c0;/*设置想要的边框颜色*/
    border-radius: 3px;/*设置边框圆角的形状*/
}
.btn-checkbox:checked+ label:before {
    background: #3e97eb;/*设置复选框里面的颜色*/
    border: #3e97eb;/*设置复选框的边框颜色*/
}
.btn-checkbox:checked+label:after{
display:block;/*设置为一个块级元素，让它变为可见状态*/
}