carlos-sanchez
11/13/2013 - 3:11 AM

Replace text with CSS We could use The Checkbox Hack here to make the text swap entirely CSS. The replacement happens the exact same way, i

Replace text with CSS

We could use The Checkbox Hack here to make the text swap entirely CSS. The replacement happens the exact same way, it just happens when an invisible checkbox right before the word is either :checked or not. This means the word needs to be in a label as well, which is able to toggle that checkbox’s state through the for attribute.

replace-text.html
content_copyfile_download
<input id="example-checkbox" type="checkbox">
<label for="example" id="example">Show</label>
replace-text.css
content_copyfile_download
#example {
  position: relative;
}
#example-checkbox {
  display: none;
}
#example-checkbox:checked + #example:after {
  content: "Hide";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: white;
}