:before :after 透明背景下网站标题的 HR 值

遇到了一些难题。

下图是站点标题区域并具有背景图像（到 HTML 文档的正文）。然后，我将透明背景放入整个容器（基本上是跨浏览器的半透明背景 - 深棕色）。最重要的是，我使用 PNG-24 切片来处理较暗的边缘。我所坚持的部分是利用 :before 和 :after （或者如果可能的话）在标题的两侧创建“橙色”线。通常，这就像将橙色线应用为一张实心图像一样简单，然后将背景颜色应用于该图像h1，但在这种情况下，我们正在使用透明背景图像，这是行不通的。我已经用这个头撞墙有一段时间了，但如果它可能的话我会感到不知所措——我还没有找到一个适合 HR 的 HTML 实体（如果这可行的话）。任何帮助将不胜感激。谢谢！

如果您的标题是一行（因此禁用换行是可以接受的），您可以使用表格表示：

<style>
H2 {display: table; width: 100%; }
H2 > SPAN {display: table-cell; white-space: nowrap; vertical-align: middle; }
H2 > SPAN:first-child + SPAN {padding: 0 .5em; width: 1px; }

/* Non-empty content and transparent color are needed for Opera 
   that otherwise does not display element as table.*/
H2 > SPAN:first-child:before,
H2 > SPAN + SPAN + SPAN:before {border-top: 1px solid #ccc; 
    color: transparent; content: "."; display: block; 
    height: 0; width: 100%; }
</style>

<h2><span></span><span>Services</span><span></span></h2>