利用偽元素修改checkbox樣式的疑惑

 <div class="weui-cell__hd pt15 pb15">
                <div class="pull-left">
                    <input type="checkbox" class="weui-check mt15" name="checkbox1" id="s11">
                    <label></label>
                </div>
            </div>
            <span class="text-dark text-supplement text-s  pt15 "> 我已閱讀<a class="text-underline" href="javascript:;">服務(wù)條款</a>和<a
                class="text-underline" href="javascript:;">隱私條款</a>并遵守相關(guān)條款。同意接受來
            自3M的最新資訊和優(yōu)惠活動</span>

input[type="checkbox"] + label::before {
  content: '\a0';
  display: inline-block;
  margin-right: 10px;
  width: .8em;
  height: .8em;
  line-height: .5;
  border: 1px solid #94a7b7;
}

input[type="checkbox"]:checked + label::before {
  background: url("../images/icon-select.png") no-repeat;
  background-size: 1em 1em;
  vertical-align: middle;
  display: inline-block;
  z-index: 2;
}

怎么能讓checked的對號超出邊框的位置顯示呢
而且 轉(zhuǎn)鐘的時候總有一些位移是為什么