CODEWITHSUNDEEP
jquerycss
GajendraSinghParihar
GajendraSinghParihar

Reputation: 9131

Can I use just CSS to change color and font size of first letter of every word

As in the question title, is it possible to change the color and font size of the first letter of every word. For example, like the following image:

enter image description here

Is it possible to do this with only CSS? I could use jQuery but only if it is not possible with a pure CSS or CSS3 solution.

Upvotes: 6

Views: 11649

Answers (5)

Progy
Progy

Reputation: 1

you can make each letter strong (bold) and then you can say h1 strong{color:whatever you want;}

Upvotes: 0

Nelson Benítez León
Nelson Benítez León

Reputation: 50563

Use the psedo-element :first-letter , like:

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

As the comments suggest, this needs each word to be in its own element, eg. <span>

But this is the closer you'll get to what OP wants in pure CSS.

Upvotes: 1

BoltClock
BoltClock

Reputation: 723428

You can produce text in small caps with every word capitalized using this CSS:

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

But you won't be able to change the color of the initial letters using CSS alone; you're going to have to use jQuery to add span elements to your text then style those elements. Something like this:

$('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>')
});

With this CSS:

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

h1 .caps {
    color: red;
}

Upvotes: 19

Vishal Suthar
Vishal Suthar

Reputation: 17183

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

Upvotes: 0

Dipak
Dipak

Reputation: 12190

JSFiddle

Here you go - 

<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")
  }
}

Upvotes: 3

Related Questions