CSS转换循环：不工作后

Question

我设置了一个复选框，并希望使用：after元素进行复选标记。但是，我无法扭转局面。附加到div的相同样式可以正常工作。

二手风格：

content: '';
position: absolute;
width:.5em;
height:.2em;
transition: all .2s;
border-left: 2px solid red;
border-bottom: 2px solid red;
top: 0.4em;
left: 0.3em;
transform: rotate(-45deg);

在此处查看Codepen：Codepen

Answer 1

多次转换会覆盖之前的transform。最好把它们写成简写

transform: rotate(-45deg) scale(1);

Answer 2

试试此代码

.wb_checkbox {
  position: relative;
}

.wb_checkbox>input[type="checkbox"] {
  cursor: pointer;
  position: absolute;
  left: 3px;
  top: 0;
  z-index: 2;
  width: 26px;
  height: 26px;
  opacity: 0;
  vertical-align: middle;
}

.wb_checkbox>input[type="checkbox"]+label {
  vertical-align: middle;
  border: 2px solid #ccc;
  background-color: #fff;
  height: 26px;
  width: 26px;
  margin-right: 16px;
  display: inline-block;
  z-index: 1;
  position: relative;
 
}

.wb_checkbox>input[type="checkbox"]:checked+label {
  background: -webkit-gradient(linear, left bottom, left top, color-stop(0, #65a416), color-stop(1, #6ca43d));
  /*background: -moz-linear-gradient(center bottom, #65a416 0%, #6ca43d 100%);*/
  box-shadow: 0 2px 7px rgba(0, 0, 0, 0.6);
  border: 2px solid #fff;
}

.wb_checkbox>input[type="checkbox"]:checked+label:after {
  content: '\2714';
  text-indent: 0;
  font-size: 15px;
  color: #fff;
  position: absolute;
  top: 2px;
  left: 7px;
  width: 13px;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.7);
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="col-md-12">
  <div class="form-group">
    <h5>Choose Option *</h5>
    <p class="wb_checkbox">
      <input type="checkbox" name="checkbox-1" id="checkbox-1" checked>
      <label for="checkbox-1"></label>
      <strong>I have not car !</strong>
    </p>
    <p class="wb_checkbox">
      <input type="checkbox" name="checkbox-2" id="checkbox-2">
      <label for="checkbox-2"></label>
      <strong>I have car</strong>
    </p>
  </div>
</div>