文本链接的颜色方向填充

Question

我已经填写并修剪以下内容：

<a class="link link--kukuri" href="#" data-letters="EXAMPLES">EXAMPLE</a>
<style>
.link {text-decoration: none; position: relative; font-size: 72px; color: #c5c5c5;}
.link--kukuri::before {content: attr(data-letters); position: absolute;
overflow: hidden; color: red; width: 0%; -webkit-transition: width 0.5s; transition: width 0.5s;}
.link--kukuri:hover::before {width: 100%;}
</style>

这是一个jsfiddle：https：//jsfiddle.net/4sme500j/1/

我需要的是同一件事，只有从右到左右的填充才能发生。我已经尝试过，但是仍然是菜鸟。

非常感谢您的关注！

Answer 1

默认情况下没有CSS的左转过渡，因此您必须交换此更新的小提琴中所示的颜色和宽度。

.link {text-decoration: none; position: relative; font-size: 72px; color: red; font-family: arial;}
.link--kukuri::before {content: attr(data-letters); position: absolute; overflow: hidden; color: #c5c5c5; width: 100%;
-webkit-transition: width 0.5s; transition: width 0.5s;}
.link--kukuri:hover::before {width: 0%;}

看起来还不太正确，但我认为您可以看到原理。

Answer 2

浏览器从 0到 100%从左到右方向浏览器width动画。但是，对于direction CSS属性，我们可以扭转此动画。

但是，在这种情况下，您需要复制内容。即。

<a class="link link--kukuri" href="#">
  <span class="normal-text">EXAMPLE</span>
  <span class="hover-text">EXAMPLE</span>
</a>

我也添加了以下CSS：

.link {
  direction: rtl;
}
.link--kukuri .normal-text {
  direction: ltr;
}
.link--kukuri .hover-text {
  right: 0;
}

.link {
  text-decoration: none;
  position: relative;
  font-size: 72px;
  color: #c5c5c5;
  font-family: arial;
  direction: rtl;
}
.link--kukuri .normal-text {
  direction: ltr;
}
.link--kukuri .hover-text {
  position: absolute;
  overflow: hidden;
  color: red;
  width: 0%;
  -webkit-transition: width 0.5s;
  transition: width 0.5s;
  right: 0;
}
.link--kukuri:hover .hover-text {width: 100%;}

<a class="link link--kukuri" href="#">
  <span class="normal-text">EXAMPLE</span>
  <span class="hover-text">EXAMPLE</span>
</a>