How to make Underline Individual Words using jQuery?
jQuery
$(‘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>’);
}
}
});
});
HTML
<h1>Split Underline</h1>
<p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don’t look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn’t anything embarrassing hidden in the middle…</p>
css
h1 {font: normal 35px ‘Wisdom Script AI’, serif; line-height: 45px;}
p {font: normal 17px Arial; line-height: 1.7;}
span{border-bottom: 1px solid black;
display: inline-block;
line-height: 35px;
margin-bottom: 15px;
}
body {background: #f1f1f1; margin: 5px 30px;}
@font-face {
font-family: ‘Wisdom Script AI’;
src: url(‘http://christopherburton.net/fonts/wisdom_script_0-webfont.eot’);
src: url(‘http://christopherburton.net/fonts/wisdom_script_0-webfont.eot?#iefix’) format(’embedded-opentype’),
url(‘http://christopherburton.net/fonts/wisdom_script_0-webfont.woff’) format(‘woff’),
url(‘http://christopherburton.net/fonts/wisdom_script_0-webfont.ttf’) format(‘truetype’),
url(‘http://christopherburton.net/fonts/wisdom_script_0-webfont.svg#WisdomScriptAIRegular’) format(‘svg’);
font-weight: normal;
font-style: normal;
}