CODEWITHSUNDEEP
htmlcss
rap-2-h
rap-2-h

Reputation: 31998

Change style only for one letter in a p

Assuming I have this HTML code:

<p>Hello world</p>

Is there a way, with CSS only, without modifying the actual HTML, to change the style of the w in the Hello world text? (let's say, paint it green)

Upvotes: 0

Views: 1878

Answers (2)

Temani Afif
Temani Afif

Reputation: 273031

If the font-size and the font-family are known, you can do this using gradient. Simply adjust the value so that only the w is colored

p {
  font-size: 30px;
  background: 
     linear-gradient(to right, black 50%, green 50%,green 67%,#000 67%);
  display: inline-block;
  background-clip: text;
  color: transparent;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
<p>Hello world</p>

Upvotes: 1

dippas
dippas

Reputation: 60563

No is not possible (unless it is the first letter), the workaround is using a span around the w and then style it

p span {
  color: lightgreen
}

div::first-letter {
  color: red
}
<p>Hello <span>w</span>orld</p>

<div>Hello world</div>

Upvotes: 2

Related Questions