CSS ONLY Toggle Button with Valid HTML

css-toggle

<div>
  <input type="checkbox" id="switch1" name="switch1" class="switch" />
  <label for="switch1">First switch</label>
</div>

<style> /* put this in buttons.scss */

input.switch:empty
{
  margin-left: -999px;
}

input.switch ~ label
{
  position: relative;
  float: left;
  line-height: 3em;
  text-indent: 1em;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  text-indent: 8em;

}

input.switch ~ label:before, 
input.switch ~ label:after
{
  position: absolute;
  display: block;
  top: 0;
  bottom: 0;
  left: 0;
  content: ' ';
  width: 5em;
  background-color: $light-grey;
  border-radius: 3px;
  -webkit-transition: all 300ms ease-in;
  transition: all 300ms ease-in;
}

// UNCHECEKD 
input.switch ~ label:before {
  content : 'No';
  color: white;
  text-indent: 3em;
  font-size: 1.5em;
  font-weight: bold;
  background-color: $grey;
}

// UNCHECKED STATE
input.switch ~ label:after
{
  background-color: $light-grey;
  border: 1px solid $profile-background-colour;
  width: 3.5em;
  color: $grey;
}

input.switch:checked ~ label:before
{
  background-color: $achievement-button-colour;
  text-indent: .5em;
  content: 'Yes'; 
}

input.switch:checked ~ label:after
{
  margin-left: 0em;
  color: white;
  margin-left: 4em;
}


</style>