Different color for each letter in specific words.

[pixelmac]

Hello,

I have this sentence repeating on a site: “Home Sweet Home”
I want this short sentence to have different colors for each word in it.
The colors would be predefined for each letter in each word.
The idea is that the client won’t have to use or do anything if they write this “Home Sweet Home” anywhere on the site.

So if the CSS recognize that sentence, then Home would be styled like:
H: blue
o: green
m: yellow
e: red

S: red
w: yellow
e: green
e: green
t: blue

Any ideas how to do this? I know it’s possible.
Thanks
Dan

[Paulie_D]

Javascript and regex.

This is not possible with CSS alone.

CSS styles elements and cannot detect content in those elements.

[gearheartstudio]

Found this answer on another site and converted it over to code pen

http://codepen.io/gearheartstudio/pen/OboaJB

should help

[pixelmac]

Great find.
Thank you so much.
Dan

[Author]

Posts