Enter the first letter of each word in the paragraph

Question

I am trying to create the first letter of a paragraph using CSS, and wanted to add some animation using greensock. But in fact, the requirement is to stylize every word of the first letter, not only the paragraph of the first letter.

What suggestion / ideas about this?

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

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

Run codeHide result

UPDATE I tried to process the following method (adding a span tag and targeting the first element of each range), but it does not work:

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

Answer 1

split(" ") forEach() . slice(0,1) , span. css

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>

Hide result

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>

Hide result

Answer 3

css first-word css.. jquery.

1: .

$(function() {
    $('p').each(function() {
        var text = this.innerHTML;
        var firstSpaceIndex = text.indexOf(" ");
        if (firstSpaceIndex > 0) {
            var substrBefore = text.substring(0,firstSpaceIndex);
            var substrAfter = text.substring(firstSpaceIndex, text.length)
            var newText = '<span class="firstWord">' + substrBefore + '</span>' + substrAfter;
            this.innerHTML = newText;
        } else {
            this.innerHTML = '<span class="firstWord">' + text + '</span>';
        }
    });
});

.firstWord{ color:red; font-size:20px;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Styling the first word of pragraph.</p>

Hide result

2:

$(document).ready(function() {
    var words = $('p').text().split(' ');
    var html = '';
    $.each(words, function() {
        html += '<span class="firstLetter">'+this.substring(0,1)+'</span>'+this.substring(1) + ' ';
    });
    $('p').html(html);
});

.firstLetter{ color:red; font-size:20px;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Styling each  first letter of the word in  pragraph.</p>

Hide result

Answer 4

, , - , . : first-letter : first-line, no: first-letter-every-word.

- <span>. - javascript-.