Multi-Colored text using only CSS

Question

I'm not sure if my title coherently expressed my issue, but I'll explain below.

I would like to assign a different color to each character in a string of text using only CSS.

To see a visual of my issue with further explanations: http://codepen.io/Connor3xL/pen/ZOyzJK

I cannot use this, and it's a bit time consuming anyways:

<!--I don't want this, and I cannot use it-->
<span style="font-family: tahoma">
<span style="color: red">U</span>
<span style="color: blue">s</span>
<span style="color: red">e</span>
<span style="color: blue">r</span>
<span style="color: red">n</span>
<span style="color: blue">a</span>
<span style="color: red">m</span>
<span style="color: blue">e</span>
</span>

I want this and can only use this:

<span class="username">Username</div>

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.

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.

Answer 1

This can be achieved with just CSS although only with a few caveats:

• A monospace font must be used
• The desired text must be passed through to CSS

The general principle is:

• Output the whole word in the desired base colour
• Use an absolutely positioned pseudo element to output the alternative colour, this is done by specifying the desired letters and using spaces for the letters that are to remain the base colour

This works because the letters in a monospace font take up the same amount of space (therefore you can be sure the letters will be in the correct position). By using absolute positioning the letters can be laid on top of the word set in HTML.

.username {
  color: red;
  font-family: monospace;
  position: relative;
}
.username:after {
  color: blue;
  content: attr(data-descr);
  left: 0;
  position: absolute;
}

<div class="username" data-descr="u e n m">username</div>

JS Fiddle

Answer 2

Dumb CSS only solution - where you need to put each letter into separate <span> so you can use :nth-child(2n+1)

.username span {
  color: red;
}
.username span:nth-child(2n+1) {
  color: blue;
}

<span class="username"><span>U</span><span>s</span><span>e</span><span>r</span><span>n</span><span>a</span><span>m</span><span>e</span></span>

OR

you can use small JavaScript like Ryan Rodemoyer suggested in this answer:

var message = "The quick brown fox.";
var colors = new Array("#ff0000","#00ff00","#0000ff"); // red, green, blue
for (var i = 0; i < message.length; i++)
  document.write("<span style=\"color:" + colors[(i % colors.length)] + ";\">" + message[i] + "</span>");

OR

maybe you're looking for something like this