文本旁边的行 - HTML + CSS

Question

我想要的是什么：

当前代码

<div class="grid3"><h1 class="lines">Welcome!</h1> <p class="lines2">Text</p></div>

.lines { color: #d5a72b; padding-right: 4px; float: left;}
.lines2 { text-indent: -999999px; background: url('../images/line.png') repeat-x; }

我得到了什么：

Answer 1

我会这样做：

<h1><span>Heading</span></h1>

h1 {
    background-image: url("lines.png") left middle repeat-x; }
h1 span {
    background: #bgcolor;
    padding: 1em; }

这是一个黑客攻击，但我不相信即使CSS3目前还有这个问题的解决方案，除了可能border-image，但IE10仍然不支持。