direction of a color fill for a text link

Question

i've fished out and trimmed the following:

<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>

here's a jsfiddle: https://jsfiddle.net/4sme500j/1/

what i need is the same thing, only the fill to happen from right to left and back. i've tried this and that, but am still too noob.

thanks a lot for your attention!

Answer 1

There is no right-to-left transition by default in css, so you have to swap the colors and widths as seen in this updated 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%;}

That doesn't look quite right yet, but I think you can see the principle.

Answer 2

Browser animate width from 0 to 100% from left to right direction. However with direction css property we can reverse this animation.

However you will need to duplicate content in this case. i.e.

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

I've added following css as well:

.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>