文本下划线并留有空格。可以通过 html 和 css 实现吗？

我花了几个小时在这上面。我试图描述所附图片上的问题。 需要用白线包裹文本，行与文本之间留有一些空格。

我想到的第一个解决方案 - 只是使用 smth 行“margin-top：-20px;”将文本放在线上并为文本容器提供自定义背景（例如灰色）。但这不是解决方案，因为容器的背景是透明的:(

我想这样做（使用“float：left”）：

<div class="line"></div>
<div class="text">TEXT</div>
<div class="line"></div>
<div class="text">TEXT</div>
<div class="line"></div>

但如果我对所有元素使用 float:left ，则会出现另一个问题：白线应该在容器的右侧结束。

也许有一些针对这个问题的CSS最佳实践，或者有人可以提供一些建议..？ 任何想法都会有帮助:)！

http://jsfiddle.net/Q8yGu/5/

HTML

<header><div><span class="spacer"></span><h1>Text</h1><span class="spacer"></span><h1>Text</h1><span class="spacer"></span></div></header>
<header><div><span class="spacer"></span><h1>100% Container Width</h1><span class="spacer"></span></div></header>

CSS

body {
    background:yellow;
}
header {
    display:table;
    width:100%;
    max-width:100%;
}
header div {
    display:table-row;
    line-height:1.5em;
    font-size:2em;
    white-space:nowrap;
}
header h1 {
    font-size:inherit; /* Change font-size in header */
    overflow:hidden;
    display:table-cell;
    vertical-align:middle;
    width:1px;
}
header span.spacer {
    display:table-cell;
}
header h1 {
    padding:0 10px;
}
header span.spacer:after {
    display:inline-block;
    width:100%;
    content:".";
    font-size:0;
    color:transparent;
    height:2px;
    background:#000;
    vertical-align:middle;
    position:relative;
    top:-1px;
}
header > a {
    font-size:.4em;
    vertical-align:middle;
    background:#25a2a4;
    color:#fff;
    text-transform:uppercase;
    font-family:monospace;
    border-radius:.5em;
    padding:.3em .5em;
    text-decoration:none;
}

Note:要添加对 IE8 的支持，请使用除header or use html5shiv.