title: How to change color of text from left to right along with the background?
body: <p>I have an element that, when hovered, changes the background color gradually from left to right. However, I wanted to change not only the background color, but also the color of the text, exactly at the same time/pace. How can I achieve this?</p>
  
  <p>This is my relevant CSS:</p>
  
  <pre><code>.left-to-right {
    color: white;
    background-size: 200% 100%;
    background-image: linear-gradient(to right, #011228 50%, #FF7800 50%);
    transition: background-position 1s;
  }
  
  .left-to-right:hover {
      background-position: -100% 0;
      color: #011228;
  }
  </code></pre>
  
  <p><a href="https://jsfiddle.net/ppxq0h8h/4/" rel="nofollow">Here's the fiddle.</a></p>