javascript - 没有图像的文本翻转效果

我的网站顶部有一个电话号码链接，该号码是1300 GO POOPIES。 (例如:P)

<h1 class="phone-text">
<a href="tel:[phone]">1300 GO POOPIES</a>
</h1>

因此，基本上，当一个人将鼠标放在1300 GO POOPIES上时，它变为1300 46 7667437。

但是，我不想使用图像，因为我想保留点击通话功能。

我尝试使用CSS进行操作，但收效甚微。

.phone-text::after {
  content: "1300 GO POOPIES";
}

.phone-text:hover:after {
  content: "1300 76 67437";
}

不知道这是否超出了CSS的范围，是否需要Java ...

最佳答案

您甚至不需要加载jQuery或JS。
仅CSS + HTML。
FIDDLE