Jquery 如何使用css更改悬停时的部分文本

我希望我的网站显示：

（855）当用户未悬停在文本上时，尝试使用PETS

，但当用户悬停在文本上时，我希望文本显示：

（855）879 7387

目前我有：

<li><a href="#"><i class="icon-phone-sign"></i>(855) TRY PETS</a></li>

有没有一种简单的方法可以使用css进行此更改？

css-only方法：

HTML:

仅CSS方法：

HTML:

---

你的解决方案更好。我会删除我的。你的解决方案更好。我将删除我的。

<li><a href="#"></a></li>

li a:before {
  content:"(855) TRY PETS"
}

li a:hover:before {
  content:"(855) 879 7387"
}