html - 文本旁边的行 - 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; }

这是一个 hack，但我不相信即使 CSS3 目前也没有解决这个问题的方法，除了可能border-image，但是 IE10 仍然不支持。