Html 标题下装饰线的简单CSS解决方案

我在一家餐馆网站上工作。菜单的每个区域都有一个标题，下面是该部分的菜肴。标题行下方有一条装饰线，用于延伸列的宽度。但是，装饰线不会出现在文本下。我想知道我怎样才能达到这个效果

我只有一个解决方案，但我正在寻找一个更简单的解决方案。我将标题行分为三个部分：

.left line

、

.Title

和

.right line

。

.left line

和

.right line

都将包含装饰线的背景图像

.title

将仅包含文本。谁能想出一个更干净的解决方案？html将是：

<p class="left-line"></p>
<p class="title">Appetizer</p>
<p class="right-line"></p>

开胃菜

---

一定要在之前和之后使用伪元素。您可能需要为其指定高度/宽度：

.title::before {
    background-image: /* your image */;
    height: 1em;
    width: 2em;
}

它们的酷之处在于它不需要额外的HTML元素。

.left line、.right line{显示：块；宽度：200px；背景：#EEE；float:left；}
.左行{宽度：50px；}
.title{float:left；}

-
开胃菜
-

必须使用伪元素

:after

和

:before

在后面和前面划线

CSS

正文{
背景：url(http://www.hdiphonewallpaper.com/uploads/image/Light%20Background/IPhone%204%20Background%20color.jpg)背景重复：无重复；
}
.集装箱{
宽度：250px；
位置：相对位置；
溢出：隐藏；
}
.头衔{
线高：2米；
字体系列：arial；
文本对齐：左对齐；
浮动：左；
}
.标题：之前{
内容：“；
//背景：url（“icon.jpg”）不重复；
边框底部：2倍实心#000；
宽度：40px；
高度：20px；
浮动：左；
裕度：-6px 5px 0；
}
.标题：之后{
内容：“；
//背景：url（“icon.jpg”）不重复；
边框底部：2倍实心#000；
宽度：100%；
高度：20px；
保证金：-6px 0px 0 5px；
位置：绝对位置；
}

开胃剂


色拉洛雷姆益普生多洛尔坐

色拉洛雷姆益普生多洛尔坐

色拉紫菜
主菜


色拉洛雷姆益普生多洛尔坐

色拉洛雷姆益普生多洛尔坐

色拉紫菜
甜点


色拉洛雷姆益普生多洛尔坐

色拉洛雷姆益普生多洛尔坐

色拉紫菜

：：before/：：after

伪元素？如果您不需要支持旧的IE浏览器，您可以使用伪元素来模拟左侧和右侧元素。编辑：@steveax击败了我。：）是的。我正在研究如何使用这些：）还值得一提的是，

应该被更具语义的东西取代，比如

h2

。谢谢！我现在一直在玩那些伪元素。我想知道你的答案是否可能使右行在标题文本结束后立即开始，右行在行尾停止？@Jon，oops。。。我在编写代码时没有意识到这一点。我已经编辑了答案。现在它看起来和您需要的一样。谢谢，但我希望找到一个解决方案，不需要添加额外的元素，如左行和右行