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; }

これはハックですが、CSS3でさえ、おそらくこの問題の解決策があるとは思いませんがborder-image、それでもIE10ではサポートされていません。