Style first letter of each word in paragraph

Question

I am trying to style the first letter of a paragraph using CSS and wanted to add some animation using greensock, But actually the requirement is to style the each word's first letter not just the first letter paragraph.

Whats the suggestion/ideas on this?

p{
  font-size:150%;
  color:#000000;
}
p::first-letter {
  font-size: 200%;
  color: #ff0000;
}

<p>Hello This Is The Title</p>

UPDATE I tried handling the following way (adding span tag and targeting first element of each span) but it doesn't work:

p span:nth-child(1)::first-letter {
   font-size: 200%;
   color: #ff0000;
}

Answer 1

use with split(" ") for create the array form string and forEach() is iterate the each word. Then slice(0,1) the cut first letter of the word then append with span .And add the css effect with span

var str = $('p').text().split(" ");
$('p').empty();
str.forEach(function(a) {
  $('p').append('&nbsp;<span>' + a.slice(0, 1) + '</span>' + a.slice(1))
})

p {
  font-size: 150%;
  color: #000000;
}

span {
  font-size: 200%;
  color: #ff0000;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Hello This Is The Title</p>

Answer 2

const p = document.getElementById('text')

const styleMe = l => '<span class="styled">' + l + '</span>'

const newS = p.innerText.split(' ').map(w => w.split('').map((l,i) => (i === 0) ? styleMe(l) : l).join('')).join(' ')

p.innerHTML = newS

.styled {
  color:red
}

<p id="text">Hello This Is The Title</p>