How do I hide button text with CSS?

I'm trying to hide the text Following when a user hovers over a button. I don't really have too much experience with CSS and am having difficulties doing this.

This is my button

<span>
   <%= link_to  'Following', follow_url(found), method: :delete, 
                class: "btn unfollow-button", id: 'unfollow-button', 
                data: { confirm: 'Are you sure?' } 
    %>
</span>

Below is the application.scss

.unfollow-button {
  width: 100px; /* set a width so it doesnt change upon hover */
  content: 'Following';
  border-color: #bd2b2b;
  background-color: #140d6d;
  color: white;
  margin-left: 20px;
  &:visited, &:focus, &:hover {
    content: 'Following';
    border-color: #FF0000;
    background-color: #FF0000;
    color: white;
  }

  
}
.unfollow-button:hover span {
  display:none
}
.unfollow-button:hover:before {
  content:" Unfollow ";
}

Right now the button is appending the new content Unfollow to the front of the button, but not removing the old content

So the button goes from Following to Unfollow Following instead of the desired result of Following to UnFollow

Any help would be greatly appreciated. Thanks!