Puis-je utiliser uniquement du CSS pour changer la couleur et la taille de la police de la première lettre de chaque mot

Comme dans le titre de la question, est-il possible de changer la couleur et la taille de la police de la première lettre de chaque mot? Par exemple, comme l’image suivante:

entrez la description de l'image ici

Est-il possible de faire cela avec seulement CSS? Je pourrais utiliser jQuery mais seulement si ce n’est pas possible avec une solution CSS ou CSS3 pure.

Vous pouvez produire du texte en petites capitales avec chaque mot en majuscule en utilisant ce CSS:

 h1 { font-variant: small-caps; text-transform: capitalize; }

Mais vous ne pourrez pas changer la couleur des lettres initiales en utilisant uniquement CSS; vous devrez utiliser jQuery pour append des éléments span à votre texte, puis styliser ces éléments. Quelque chose comme ça:

 $('h1').html(function() { // Very crude regex I threw together in 2 minutes return $(this).text().replace(/\b([az])/gi, '$1') });

Avec ce CSS:

 h1 { font-variant: small-caps; text-transform: capitalize; } h1 .caps { color: red; }

JSFiddle

Voici –

 First letter of every word is now red!
 .first-letter { color: red; } window.onload = function(){ var elements = document.getElementsByClassName("each-word") for (var i=0; i$1$2") } }

Utilisez le psedo-element :first-letter , comme:

 .word:first-letter { font-size:200%; color:#8A2BE2; }

Comme le suggèrent les commentaires, il faut que chaque mot soit dans son propre élément, par exemple.

Mais c’est plus vous vous rapprocherez de ce que veut OP en CSS pur.

HTML

 The title of this page goes here

JQuery

 $(document).ready(function() { var words = $('h1').text().split(' '); var html = ''; $.each(words, function() { html += ''+this.subssortingng(0,1)+''+this.subssortingng(1) + ' '; }); $('h1').html(html); });

JSFIDDLE