CSS3文本悬停效果像进度条一样移动背景

我已经尝试过使用不同风格的文本背景悬停效果，但这次没有

下面的链接是指向我所说内容的gif

为了描述我试图实现的目标，当锚定链接处于悬停状态时，背景颜色开始出现在其背面，就像一个进度条，以平滑地填充文本的宽度。我生成的gif质量非常低，这就是为什么它不平滑

我在中看到了这种效果，我正在尝试重新创建它，但不知道如何做到这一点

a{ 字体大小：60px； 字体大小：粗体； 颜色：121212； 文字装饰：无； 背景位置：0； 背景图像：向右线性渐变，rgba255，255，255，0 50%，橙色50%； 过渡：背景位置0.5s缓和0s； 背景尺寸：200.22%自动； } a:悬停{ 背景位置：-99.99%0； 背景图像：向右线性渐变，rgba255，255，255，0 50%，橙色50%； } a{ 字体大小：60px； 字体大小：粗体； 颜色：121212； 文字装饰：无； 背景位置：0； 背景图像：向右线性渐变，rgba255，255，255，0 50%，橙色50%； 过渡：背景位置0.5s缓和0s； 背景尺寸：200.22%自动； } a:悬停{ 背景位置：-99.99%0； 背景图像：向右线性渐变，rgba255，255，255，0 50%，橙色50%； }

---

您是否尝试检查要复制哪些样式的元素？是否看到gif？是的。它说，背景位置：-99.99%0；您是否尝试检查要复制哪些样式的元素？是否看到gif？是的。它说，背景位置：-99.99%0；

<A href="#">
   Hello World! 
</a>

a {font-size:60px; font-weight: bolder; color:#121212; text-decoration:none;}
a:hover {background:orange;}