文本链接的颜色填充方向

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 中没有从右到左的过渡，因此您必须交换颜色和宽度，如更新后的fiddle. 中所示

.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

浏览器动画width从0到100%从左到右方向。但是使用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>