CSS transform rotation on :after not working - html

Question

I've styled a checkbox and wanted to make a checkmark with the :after element. However, I can not turn it around. The same style attached to a div works fine.
Used style:
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);
See a Codepen here: Codepen

Answer 1

Multiple transform overrides the previous transform. Better to write them as shorthand
transform: rotate(-45deg) scale(1);

Answer 2

Try this code
.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>