Kann ich nur CSS verwenden, um Farbe und Schriftgröße des ersten Buchstabens jedes Wortes zu ändern

Question

Wie im Fragetitel ist es möglich, die Farbe und Schriftgröße des ersten Buchstabens jedes Wortes zu ändern. Zum Beispiel, wie das folgende Bild:

Ist es möglich, dies mit nur CSS zu tun? Ich könnte jQuery aber nur verwenden, wenn es mit einer reinen CSS- oder CSS3-Lösung nicht möglich ist.

Answer 1

Sie können mit jedem Wort Text in Kapitälchen produzieren diese CSS kapitalisiert mit:

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

Aber Sie werden CSS nicht allein mehr geändert werden, um die Farbe der Anfangsbuchstaben verwendet wird; Sie müssen jQuery verwenden, um Ihrem Text span Elemente hinzuzufügen und diese Elemente dann zu formatieren. Etwas wie folgt aus:

$('h1').html(function() { 
    // Very crude regex I threw together in 2 minutes 
    return $(this).text().replace(/\b([a-z])/gi, '<span class="caps">$1</span>') 
}); 

Mit diesem CSS:

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

h1 .caps { 
    color: red; 
} 

Answer 2

Verwenden Sie das psedo-Element :first-letter, wie:

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

Da die Kommentare deuten darauf hin, dies muss jedes Wort in sein ein eigenes Element, z. <span>

Aber das ist, desto näher kommen Sie zu was OP in reinem CSS will.

Answer 3

JSFiddle

Hier gehen Sie -

<p class="each-word">First letter of every word is now red!</p> 

.first-letter { 
    color: red; 
    } 

window.onload = function(){ 
    var elements = document.getElementsByClassName("each-word") 
    for (var i=0; i<elements.length; i++){ 
    elements[i].innerHTML = elements[i].innerHTML.replace(/\b([a-z])([a-z]+)?\b/gim, "<span class='first-letter'>$1</span>$2") 
    } 
} 

Answer 4

HTML

<h1>The title of this page goes here</h1>​ 

JQuery

$(document).ready(function() { 
var words = $('h1').text().split(' '); 
var html = ''; 
$.each(words, function() { 
    html += '<span style="font-size:200%">'+this.substring(0,1)+'</span>'+this.substring(1) + ' '; 
    }); 
    $('h1').html(html); 
});​ 

JSFIDDLE