Center in element :after

Question

I have the code below:

.divCheckList .valorBool, 
.divCheckList .divCheckBox {
    height: 34px;
    display: inline-block;
    border:#CCC .1px solid;
    vertical-align:middle;
}

.divCheckList .valorBool {
    line-height: 34px;
}
.divCheckList .divCheckBox .checkBox {
    display: none;
}

.divCheckList .labelCheckBox {
    display:block;
    width:60px;
    height:34px;
    background-color:#CCC;
    border:none;
    border-radius:34px;
}

.divCheckList .labelCheckBox:after {
    display:block;
    width:26px;
    height:26px;
    background-color:#FFF;
    border:#000 .1px solid;
    border-radius:50%;
    content:"";
}

html

  <div class="divCheckList">
    <label class="valorBool">NÃO</label>
    <div class="divCheckBox">
      <input type="checkbox" name="cb" id="cb" class="checkBox">
      <label for="cb" class="labelCheckBox"></label>
    </div>
    <label class="valorBool">SIM</label>
  </div>

That shows the following picture:

However, I would like to center the white ball so that it is spaced in the corners and on top.

I tried with margin: 4px;but the image distorts.

How to correct?

Answer 1

You can, as said in the comments, add the position: relative in .labelCheckBox and position: absolute in the :after.

.divCheckList .labelCheckBox {
  position: relative;
  ...
}
.divCheckList .labelCheckBox:after {
  position: absolute;
  top: 3px;
  left: 3px;
  ...
}

And when selected, apply the position change.

.divCheckList .checkBox:checked + .labelCheckBox:after {
  right: 3px;
  left: initial;
}

Jsfiddle