CSS checkbox basics

Done on some Contao HTML markup.

HTML

<div class="widget widget-checkbox mandatory">
  <fieldset id="ctrl_47" class="checkbox_container mandatory">
    <input name="accept" value="" type="hidden">
    <span>
      <input name="accept" id="opt_47_0" class="checkbox" value="accept" required="" type="checkbox">
      <label id="lbl_47_0" for="opt_47_0">accept</label>
    </span>
  </fieldset>
</div>

CSS

body {
  margin: 40px; /** testing in fiddle only */
}
/** checkbox invisible - taken from selector ".invisible" for screen reader */
.checkbox {
	border: 0 none;
	clip: rect(0 0 0 0);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
}

/** the label */
.checkbox_container label {
  display: block; /** more flexible in styling */
  position: relative; /** for positioning the pseudo elements in relation to this */
  cursor: pointer;

  /** optional */
  color: white;
  background-color: rgba(255, 0, 0, .5);
  border: 3px solid rgba(255, 0, 0, .5);
  transition: all .5s ease 0s;
  box-sizing: border-box;
  max-width: 50%;
  padding: .2em .2em .2em 80px;
}


/** additional boxes (pseudo elements ::before and ::after) */
.checkbox_container label::before,
.checkbox_container label::after {
  position: absolute; /** gets display:block; automatically */
  width: 40px;
  height: 40px;

  /** optional */
  color: white;
  transition: all .5s ease 0s; /** gets not inherited from label */
  box-sizing: border-box;
}
/** an additional box (pseudo element ::before) */
.checkbox_container label::before {
  left: -20px;
  top:  -40px;

  /** optional */
  content: 'before';
  border: 3px solid rgba(0, 255, 0, .5);
  background-color: rgba(0, 255, 0, .5);
}

/** an additional box (pseudo element ::after) */
.checkbox_container label::after {
  left: 40px;
  top:  -40px;

  /** optional */
  content: 'after';
  border: 3px solid rgba(0, 0, 255, .5);
  background-color: rgba(0, 0, 255, .5);
}

/** following are complete optional */

/** hover states */
.checkbox_container label:hover {
  color: red;
}
.checkbox_container label:hover::before {
  color: green;
}
.checkbox_container label:hover::after {
  color: blue;
}

/** mouse down states */
.checkbox_container label:active {
  color: blue;
  max-width: 100%;
}
.checkbox_container label:active::before {
  color: red;
}
.checkbox_container label:active::after {
  color: green;
}

/**...