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

Question

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

<h1 class="phone-text">
<a href="tel:+6113007667437">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...

Answer 1

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