How to Underline Individual Words with jQuery?
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 to h1
elements.
Javascript:
$('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:
HTML
h1 span {
text-decoration: underline;
}