Another possible option is to use SVG. You can create multi colored text in SVG using gradients. If two adjacent gradient stops are at the same position then you will get a sharp transition between colors. If two adjacent gradient stops are at different positions then you will get a smooth transition between colors. You can have as many color stops as you want. For example...
<svg width="200" height="80" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="bicolored">
<stop offset="33%" stop-color="red"/>
<stop offset="33%" stop-color="blue"/>
</linearGradient>
<linearGradient id="tricolored">
<stop offset="33%" stop-color="red"/>
<stop offset="33%" stop-color="green"/>
<stop offset="66%" stop-color="green"/>
<stop offset="66%" stop-color="blue"/>
</linearGradient>
<linearGradient id="smooth">
<stop offset="33%" stop-color="red"/>
<stop offset="66%" stop-color="blue"/>
</linearGradient>
</defs>
<text x="0" y="20" fill="url(#bicolored)">Some bicolored Text</text>
<text x="0" y="40" fill="url(#tricolored)">Some tricolored Text</text>
<text x="0" y="60" fill="url(#smooth)">Some smooth gradient Text</text>
</svg>
Note that in SVG, the color stops are at relative positions (e.g. 0 to 1, 0% to 100%). This could make it a little hard if you are trying to place the color stops at specific pixel locations.
Note that in SVG, you have to manually position the text element within the svg element.
:before
<span class="red">red text</span><span class="blue"> blue text</span>
? As that would be way easier