html/css, changing each letter of text? [closed]

Is it possible to change color of each letter of a text, for example, I print on screen in tags text, and i want to iterate to every letter, check its value and change its color accordingly, is that possible in using html/css or javascript to add the tags (or if js has a library that already does that), something like the image below, as you notice, each letter has its own color

enter image description here


create the spans with javascript and style the spans with css:


$('document').ready(function() {
    $('.protein').each(function() {
        var target = $(this).html();
        target = target.split("");
        var result = "";
        for (var i = 0, len = target.length; i < len; i++) {
            result += '<span class="' + target[i] + '">' + target[i] + '</span>';


.V, .L { background-color:green;}
.H {background-color:purple;}
.T {background-color:orange;}
.E {background-color:red;}
.A {background-color:lightgrey;}

HTML (for example)

<div class="protein">VHLTA</div>
<div class="protein">AVTAL</div>
<div class="protein">GGEAG</div>
<div class="protein">VHLTA</div>
<div class="protein">PWTQ</div>

Leave a Reply

Your email address will not be published. Required fields are marked *