Change text on hover, then return to the previous text

Yes, you can use CSS content. To switch between the normal text and “Reply!”, put the normal text in a span and hide that when hovering.

button {
  width: 6em
}

button:hover span {
  display: none
}

button:hover:before {
  content: "Reply!"
}
<button><span>3 replies</span></button>

Expand snippet

Edit: this works in IE8, but not in its compatibility mode, so I assume IE7 is out. Would that be a problem?

Leave a Comment