In my previous post I provided a jQuery and CSS-based solution for styling the first word of all headings in a page differently. Let’s look at a different scenario now where the first character of all headings (say, <h2> this time) in a page are different from the rest of the letters. The jQuery logic changes to:

$(document).ready(function() {
$(“h2″).each(function() {
var text = $(this).html();

var first = $(‘<span>’+text.charAt(0)+’</span>’).addClass(‘h2firstletter’);

$(this).html(text.substring(1)).prepend(first);

});

});

Here the first character in each h2 element gets wrapped by a span with a class “h2firstletter” applied. And then all you are left to do is style h2 and .h2firstletter using CSS.

I styled the following:

h2{
font-family: Arial, Helvetica, sans-serif;

color:#0CF;

}

.h2firstletter{

font-family:Georgia, “Times New Roman”, Times, serif;

color:#F00;

}

On adding <h2> elements in the markup, the output on the browser would be like this:

Latest posts by Smarajit Dasgupta

  • Share/Bookmark