target first letter of each word in css

Question

I need to change size, color, and weight of every first letter of each word. I am not talking about Capitalize each first letter. I mean that target first letter and apply style according to my choice. : Click Here to see example about which i am talking.

This is a duplicate: https://stackoverflow.com/questions/7440572/css-bold-first-word — Derek Brown, Oct 20 '17 at 16:42
@DerekBrown look at my question and example first. I don't need targeting the first letter of a paragraph. I need target first letter of each word in a sentence. your provided link is not my solution, I have checked this before — Shakil Ahmad, Oct 21 '17 at 08:01

score 12 · Accepted Answer · edited Jun 16 '20 at 02:06

You should wrap every single word with a tag and use ::first-letter CSS selector .

Also, note that this selector does not work on inline elements. If you want to use it with an inline element, such a <span>, make sure you set display:inline-block (see here for more details: https://stackoverflow.com/a/7631782/11298742)

example :

p span { display: inline-block; font-family: 'Roboto', sans-serif }
p span::first-letter {
    color: red;
    font-weight: bold;
}

<p><span>Lorem</span> <span>ipsum</span> <span>dolor</span> <span>sit</span> <span>amet</span></p>

target first letter of each word in css

1 Answers1

Linked

Related