Split Underline

Concept By: Christopher Burton Javascript By: Jamy Golden

by ChristopherBurton

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'; 
    line-height: 45px;
}

p {
    font: normal 17px  'Myriad Pro', Trebuchet MS; 
    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;}
h2 {font: bold 22px 'Myriad Pro', Trebuchet MS; text-transform: uppercase;}
@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

// By: Jamy Golden


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