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

Question

我正在餐馆网站上工作。菜单的每个区域都有一个标题，下面是该部分的菜肴。标题行下方有一条装饰线，可以拉伸色谱柱的宽度。然而，装饰线不会出现在文字下面。我想知道如何才能达到这个效果？

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

Answer 2

绝对使用::before和::after伪元素。你可能需要给它一个高度/宽度：

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

这些很酷的事情是它不需要多余的HTML元素。

Answer 3

.left-line,.right-line{display:block;width:200px;background:#EEE;float:left;}
.left-line {width:50px;}
.title{float:left;}

<p>
<div class="left-line">-</div>
<div class="title">Appetizer</div>
<div class="right-line">-</div>
<div style="clear:both;"></div>
</p>

你可以尝试这段代码。