画像を使わずに見出しを水平線で挟む

HTML

<link href='http://fonts.googleapis.com/css?family=Sorts+Mill+Goudy' rel='stylesheet' type='text/css'> 

<div id="ex1">
<h1><span>TEST</span></h1>
</div>

<div id="ex2">
<h1><span>TEST</span></h1>
</div>

<div id="ex3">
<h1><span>TEST</span></h1>
</div>

<div id="ex4">
<h1 class="headline">TEST(jQuery)</h1>
</div>

CSS

article, aside, figure, footer, header, hgroup, 
menu, nav, section { display: block; }

  body{
    margin:0; 
    padding:24px 0 0 0; 
    line-height:1.5; 
    background:#fff;
    font-family: 'Sorts Mill Goudy', serif;
}

  h1 {
    border-top: 1px solid black;
    margin:23px 0 0;
    text-align:center;
    padding:0; height:24px;
}

  h1 span {
    position: relative;
    top: -24px;
    padding: 0 20px;
    background:white;
}

  div {
    margin: 0; 
    padding:50px; 
    background:white;
}

  #ex1 p, #ex2 p{
    margin:0 0 12px; 
}
  
  #ex2 h1{
    border-color:#444;
    color:#444;
    border-top:3px double black;
}

  #ex2, #ex2 span{
    background:#eee;
}

  #ex3 h1{
    border-top:3px double black;
    text-align:left; 
    padding-left:70px;
}

  #ex3, #ex3 span{
    background:#ddd;
}

  #ex3 h1, #ex3 p {   
    border-color:#333; 
    color:#333;
}

  #ex4 p, #ex2 p{
    margin:0 0 12px; 
}
  
  #ex4 h1{
    border-color:#444; 
    color:#444;
}

JavaScript

$(document).ready(function() {
      var h = $('.headline'),
          htext = $(h).text(),
          full = '<span>' + htext + '</span>';
      $(h).html(full);
    });