Generated by SassMeister.com.

SassMeister-input-HTML.html

<div class="checkbox">
	<input id="my-checkbox" type="checkbox">
	<label for="my-checkbox">
		<span class="checked-content">Checked</span>
		<span class="unchecked-content">Unchecked</span>
	</label>
</div>

<div class="checkbox fake-checkbox">
	<input id="my-fake-checkbox" type="checkbox">
	<label for="my-fake-checkbox">
		<span class="checked-content">Checked</span>
		<span class="unchecked-content">Unchecked</span>
	</label>
</div>

SassMeister-input.scss

// ----
// Sass (v3.3.0.rc.2)
// Compass (v1.0.0.alpha.17)
// ----

.checked-content {
	display: none;
}

input:checked + label {
  .checked-content {
	  display: inline;
  }
  
  .unchecked-content {
	  display: none;
  }
}

.fake-checkbox:not(:root) {
  input {
    position: absolute;
	  opacity: 0;
  }
  
  label:before {
    content: 'X';
    color: red;
	}
	
	input:checked + label:before {
    content: 'V';
    color: green;
  }
}

SassMeister-output.css

.checked-content {
  display: none;
}

input:checked + label .checked-content {
  display: inline;
}
input:checked + label .unchecked-content {
  display: none;
}

.fake-checkbox:not(:root) input {
  position: absolute;
  opacity: 0;
}
.fake-checkbox:not(:root) label:before {
  content: 'X';
  color: red;
}
.fake-checkbox:not(:root) input:checked + label:before {
  content: 'V';
  color: green;
}

SassMeister-rendered.html

<div class="checkbox">
	<input id="my-checkbox" type="checkbox">
	<label for="my-checkbox">
		<span class="checked-content">Checked</span>
		<span class="unchecked-content">Unchecked</span>
	</label>
</div>

<div class="checkbox fake-checkbox">
	<input id="my-fake-checkbox" type="checkbox">
	<label for="my-fake-checkbox">
		<span class="checked-content">Checked</span>
		<span class="unchecked-content">Unchecked</span>
	</label>
</div>