title: Multi-Colored text using only CSS
body: <p>I'm not sure if my title coherently expressed my issue, but I'll explain below.</p>
  
  <p>I would like to assign a different color to each <strong>character</strong> in a string of text using <strong>only</strong> CSS.</p>
  
  <p>To see a visual of my issue with further explanations: <a href="http://codepen.io/Connor3xL/pen/ZOyzJK" rel="noreferrer">http://codepen.io/Connor3xL/pen/ZOyzJK</a></p>
  
  <p>I cannot use this, and it's a bit time consuming anyways:</p>
  
  <pre><code>&lt;!--I don't want this, and I cannot use it--&gt;
  &lt;span style="font-family: tahoma"&gt;
  &lt;span style="color: red"&gt;U&lt;/span&gt;
  &lt;span style="color: blue"&gt;s&lt;/span&gt;
  &lt;span style="color: red"&gt;e&lt;/span&gt;
  &lt;span style="color: blue"&gt;r&lt;/span&gt;
  &lt;span style="color: red"&gt;n&lt;/span&gt;
  &lt;span style="color: blue"&gt;a&lt;/span&gt;
  &lt;span style="color: red"&gt;m&lt;/span&gt;
  &lt;span style="color: blue"&gt;e&lt;/span&gt;
  &lt;/span&gt;
  </code></pre>
  
  <p>I want this and can only use this:</p>
  
  <pre><code>&lt;span class="username"&gt;Username&lt;/div&gt;
  </code></pre>
  
  <p>Where "username" would be defined by CSS. That CSS is what I need. This would also obviously have the same effect as the HTML version.</p>
  
  <p>The reason I need it to be only in CSS is because I'm using this code on Xenforo Usernames. I've seen it done before, so I know it is very well possible. I've googled for about half an hour, experimented with gradients, couldn't duplicate it. I'm hoping somebody out there can help.</p>