Center on element: after

Question

Center on element: after

Navigation

#1 by (0 votes)

2

I have the following code:

.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 image:

However,Iwouldliketocenterthewhiteballsothatitisspacedinthecornersandontop.

Itriedwithmargin:4px;buttheimagedistorts.

How to fix?

css css3

asked by anonymous 02.09.2017 / 01:15

1 answer

SQL Server drives recognition for db connection in PHP [closed] Non-fiscal note issue [closed]

score 0 · Answer 1

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

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

And, when the option is selected, apply the change of position.

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

JSFiddle