Custom CSS Checkbox with caption inside

I'm trying to create a custom CSS for checkboxes following designer's specs. My checkboxes have to be circle with 60px radius, and the checkbox label must be places at the center of that circle. Moreover, when the checkbox is "checked" the background must becomes red.

Here is what i achieve to create so far : http://ift.tt/1dOSmnE

Here is the code :

HTML

<div class="mybox">
  <input type="checkbox" value="None" id="sth" name="check" checked />
  <label for="sth">
    <span>
      Test
    </span>
  </label>
</div>

CSS

.mybox {
  width: 120px;
  position: relative;
  margin: 0;
  padding:0;
  label {
    color: #000;
    width: 120px;
    height: 120px;
    padding:0;
    cursor: pointer;
    position: absolute;
    top: 0;
    left: 0;
    text-align: center;
    line-height: 120px;
    border-radius: 50%;
   border: 2px solid black;
    &:after {
      box-sizing: border-box;

      content: '';
      width: 120px;
      height: 120px;
      position: absolute;
      top: 0px;
      left: 0px;
      border: 2px solid red;
      background: red;
      opacity: 0;
      border-radius: 50%
    }


  }
  input[type=checkbox] {
    visibility: hidden;
    &:checked + label:after {
      opacity: 1;
    }    
  }
}

The result is quite meeting expectations but as you can see on the demo the caption becomes hidden by the red overlay and I'm stuck fixing it.

Any idea ? Thank you !