Css 假元素上的背景剪辑和变换使其在Chrome中消失

我正在制作一个带有动画链接文本背景的菜单。我想让链接文本“填补”与鼠标上的不同颜色。这基本上很简单：“填充”颜色是渐变背景，链接文本有

背景剪辑：文本设置，它就工作了

问题是链接文本有一个
：after
，其中包含一个图标，应该使用css转换对该图标进行动画设置（在本例中旋转）。
after
伪元素需要像链接文本一样用颜色“填充”，就像它是链接文本中的另一个“单词”

在Firefox中运行良好，但在Chrome中存在一个问题：任何转换一开始，伪元素就会消失。无论是什么变换（平移、旋转或其他），后的
将消失。在我看来，css转换和背景剪辑以某种方式相互排斥，因为它在
之后的
上没有转换就可以很好地工作

我玩了位置、背面可见性和其他一些属性，但没有成功

HTML:

这是一支可以玩的钢笔：

在Firefox中工作，在Chrome中失败

我没有主意了，任何帮助都将不胜感激
 这并不能解释Chrome/Edge中出现的问题，但这是一种解决方法，在实践中可能是可行的，这取决于各种因素，如过渡速度，因为人类可能没有注意到黑客行为

“后”内容是可见的，如果在旋转时给它颜色，我们可以在悬停期间给它深色，直到最后一分钟给它石灰类型的颜色。因此，我们使用CSS动画而不是过渡：



.链接{
显示：块；
宽度：400px；
保证金：0自动；
填充：20px；
文字装饰：无；
字体：700 20px/1.5em无衬线；
背景：#eee；
}
.链接文本{
背景图像：线性渐变（向右，#0a0，#0a0 50%，#333 50%，#333）；
背景大小：200%100%；
背景位置：100%50%；
背景重复：无重复；
-webkit背景剪辑：文本；
背景剪辑：文本；
颜色：透明；
过渡：均为0.5s；
}
.链接文本：在{
内容：'.x'；
显示：内联块；
动画名称：无；
}
.link：悬停。链接文本{
背景位置：0.50%；
}
.link:悬停。链接文本：在{
动画：旋转0.5s线性1；
动画填充模式：正向；
}
@关键帧旋转{
0% {
变换：旋转（0度）；
颜色：#333；
}
99% {
颜色：#333；
}
100% {
变换：旋转（180度）；
颜色：#0a0；
}
}
我注意到，如果您专门为伪元素指定一种颜色（例如颜色：黑色），伪元素是可见的，并且它在悬停（边/铬）上旋转。是的，但它必须具有
颜色：透明
才能看到“颜色填充”效果。嘿，如果链接在将来断开，这个问题将不会有用。有一个特性可以在堆栈溢出中生成简单的代码示例，就像CodePen一样。试着用这些来代替。你可以继续使用transition来进行淡出：更简单、更整洁，谢谢。动画不是个坏主意，至少作为一种解决方法。：-）虽然有一个真正的解决方案会很好，但在我正在进行的项目中，有很多动画供用户选择，如果有一个代码最少的解决方案，我们将不胜感激：）
<a href="#" class="link">
    <span class="link-text">This is the text of the link</span>
</a>

.link {
    display: block;
    width: 400px;
    margin: 0 auto;
    padding: 20px;
    text-decoration: none;
    font: 700 20px/1.5em sans-serif;
    background: #eee;
}

.link-text {
    background-image: linear-gradient(to right, #0a0, #0a0 50%, #333 50%, #333);
    background-size: 200% 100%;
    background-position: 100% 50%;
    background-repeat: no-repeat;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    transition: all 0.5s;
}

.link-text:after {
    content: ' .x';
    transition: all 0.5s;
    display: inline-block;
}

.link:hover .link-text {
    background-position: 0 50%;
}

.link:hover .link-text:after {
    transform: rotate(180deg);
}