Split Underline

Concept By: Christopher Burton Javascript By: Jamy Golden

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;
}

JavaScript

// Concept By: Christopher Burton
// JQuery By: Jamy Golden
// Chris Coyier: https://twitter.com/#!/chriscoyier/status/111288512896176128

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