How to color each word of the h2 header in a different color using css?
2 answers
Via css only if each word is wrapped in a tag
Dmitry Dmitry
366 one eleven
- Then I wrap every word inside the h2 in a span? Or something else? - Topik
- Yes, as an option <h2> <span> Text </ span> <span> text </ span> </ h2> - Dmitry
|
Can be done with such a simple JavaScript .
var colors = ["red", "blue", "green", "orange", "olive"]; var el = document.getElementById("h") var arr = el.innerText.split(" "); var str = ""; var i = 0; for (var word of arr) { str += ` <span style="color:${colors[i++ % colors.length]}">${word}</span>`; } el.innerHTML = str; <h2 id="h">ΠΡΠ΅ΠΌ ΠΏΡΠΈΠ²Π΅Ρ, Ρ Π²Π°ΠΌΠΈ Π³ΠΎΠ²ΠΎΡΠΈΡ ΡΡΠΆΠΈΠΉ ΠΊΠΎΡ!</h2> 
Dmitry Polyanin Dmitry Polyanin
11.3k one 12 37
|