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>