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

Question

我正在一家餐厅网站上工作。菜单的每个区域都有一个标题，标题下方是该部分的菜肴。标题行下方有一条装饰线，它拉伸(stretch)了列的宽度。但是，装饰线不会出现在文本下方。我想知道如何才能达到这种效果？

我只有一个解决方案，但我正在寻找一个更简单的解决方案。我会将标题行分为三个部分:.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>

Answer 1

必须使用伪元素 :after 和 :before 来在前后创建行。

CSS

body {
  background:url(http://www.hdiphonewallpaper.com/uploads/image/Light%20Background/IPhone%204%20Background%20color.jpg); background-repeat:no-repeat;
}
.container {
  width:250px;
  position:relative;
  overflow:hidden;
}

.title{
  line-height:2em;
  font-family:arial;
  text-align:left;
  float:left;
}

.title:before {
 content: "";
 // background: url("icon.jpg") no-repeat;
 border-bottom:2px solid #000;
 width: 40px;
 height: 20px;
 float: left;
 margin: -6px 5px 0 0;
}

.title:after {
 content: "";
 // background: url("icon.jpg") no-repeat;
 border-bottom:2px solid #000;
 width:100%;
 height: 20px;
 margin: -6px 0px 0 5px;
 position:absolute;
  
}

<div class="container">

<span class="title">APPERTIZER</span>
  <br style="clear:both">
Salad-Lorem ipsum dolor sit<br>
Salad-Lorem ipsum dolor sit<br>
Salad-Lorem ipsum dolor sit

<span class="title">ENTREE</span>
  <br style="clear:both">
Salad-Lorem ipsum dolor sit<br>
Salad-Lorem ipsum dolor sit<br>
Salad-Lorem ipsum dolor sit

<span class="title">DESSERT</span>
  <br style="clear:both">
Salad-Lorem ipsum dolor sit<br>
Salad-Lorem ipsum dolor sit<br>
Salad-Lorem ipsum dolor sit
  
</div>

http://jsbin.com/sikotadufo/2/edit