<p>
  <label>
    <input type="checkbox"> I like this
  </label>
</p>
input::before {
  content: "💔";
  line-height: 1;
  vertical-align: top;
  position: relative;
  left: -1.5em;
}

input:checked::before {
  content: "❤️";
}

/* Other styles */
*{
  margin: 0;
}
p {
  padding: 30px 60px;
}

input {
  vertical-align: top;
}

label {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.