文字下的邊框但不通過文字

Question

我正在爲我的雜誌製作網頁設計。現在，我正在試圖製作類似1996年的標題，您可以在下面的圖片中看到。文本下方有邊框，但文字周圍有白色背景。任何人都可以幫助我做到這一點？ :)

Answer 1

當然，試試這個：

HTML

<div class="heading"> 
    <h1>Heading Title</h1> 
</div>​ 

CSS

.heading { 
    text-align:center; 
    border-bottom:2px solid #d5d5d5; 
} 
.heading h1 { 
    display:inline-block; 
    font-family:Georgia, "Times New Roman", Times, serif; 
    font-weight:100; 
    font-size:36px; 
    position:relative; 
    top:18px; 
    background:#fff; 
    padding:0 12px; 
} 
div,h1 { 
    margin:0; 
    padding:0; 
}​ 

jsFiddle example