Style first letter of each word in paragraph
css, html, javascript, jquery
Solution
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(' <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>
Problem
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; } ```