jQuery: Underline Individual Words

There is no CSS for applying an underline (text-decoration: underline;) only to individual words in a multiple-word element. The best way would be to wrap each word in a span (not the spaces, just the words) in spans and apply underline to those spans. Here's jQuery to do that toh1 elements.

$('h1').each(function() {

 var words = $(this).text().split(' ');

 $(this).empty().html(function() {

  for (i = 0; i < words.length; i++) {
   if (i == 0) {
    $(this).append('<span>' + words[i] + '</span>');
   } else {
    $(this).append(' <span>' + words[i] + '</span>');
   }
  }
 
 });

});

Then you could do:

h1 span {
  text-decoration: underline;
}

Similar and slightly more robust solution: Lettering.js