how to change color of each letter of
with just css

Question

I am trying to change each letter styles but I'm restricted from using javascript and without using span for each letters , I searched got some pseudo nth-letter but this not working , I know this type of question asked before but the restrictions force me to add this question.

please give some suggestions , it is really helpful

.change:nth-letter(3)
{
color:red;
font-size:20px;
}

<p class="change"> Color </p>

Can you use CSS? What does "I have restricted to use javascript" mean? — Tom Bryant, Apr 16 '19 at 06:46
yes but cannot use javascript and also cannot give span like elements for each letter — Mohammed Rabiulla RABI, Apr 16 '19 at 06:48

score 2 · Accepted Answer · answered Apr 16 '19 at 07:18

This is a hack that uses:

a monospace font so that each letter has a uniform width
inline display so that the width of the container is as much as its text
uses experimental background-clip: text to clip the background on to the text
uses a linear-gradient to color each letter

See demo below:

.change {
  font-size: 20px;
  font-family: monospace;
  display: inline;
  -webkit-background-clip: text;
  background-clip: text;
  color:transparent;
  background-image: linear-gradient(to right, black 40%, red 40% 60%, black 60%);
}

<p class="change"> Color </p>

great mind really it will works , but need extra efforts :) – Mohammed Rabiulla RABI Apr 16 '19 at 07:24 — Mohammed Rabiulla RABI, Apr 16 '19 at 07:24

Saravana · Answer 2 · 2019-04-16T09:32:35.623

-2

I think, you cannot use pseudo elements as :second-letter or :third-letter. The possible way to select first and last word follow below.

.hello:first-letter {
  color:red;
}
.hello:after {
  color: red;
  content: "r";
}

<p class="hello">Colo</p>

edited Apr 16 '19 at 09:32

answered Apr 16 '19 at 07:14

Saravana

3,389
4
21
37

how to change color of each letter of with just css

2 Answers2

how to change color of each letter of
with just css