运用伪类实现复选框的样式问题

Question

样式代码：

input[type="checkbox"] {
    border: 1px solid #a9afb4;
    text-align: center;
    padding: 0;
    margin: 0;
    width: 16px;
    height: 16px;
    background: white;
    -webkit-appearance: none;
    -webkit-border-radius: 2px;
    border-radius: 2px;
    vertical-align: middle;
    color: #fff;
    transition: all 0.1s linear;
    cursor: pointer;
  }

  input[type="checkbox"]:before {
    content: "✔";
    font-size: 8px;
  }


  input[type="checkbox"]:checked {
    background: #0AA89E;
    border: none;
    color: #fff;
  }

如果里面的勾号不用特殊字符打上去的话，可以用什么样式实现，请大神们帮帮忙看看？？

Answer 1

content: '\2714';你可以参考HTML CSS 特殊字符表，我写的几个复选框链接描述，当然你要正规点的还是推荐用字体图标库来搞

Answer 2

楼上说的特殊字符表好像更方便一点，我这里再说一个方法吧：

大致思路：如果想要一个勾号，先设置div的width和height，再设置边框粗细，类型和颜色，最后将上边框和左边框去掉，这时，边框就只剩下右边框和下边框，只要将此div旋转45度，就可以了

代码大致如下：

.xxx-radio:checked+.xxx-radio-label:after {
    width: 5px;
    height: 10px;
    border: 2px solid rgba(25,164,137,1);
    border-top: none;
    border-left: none;
    transform: rotate(45deg)
}