:在复习了我的背景文字之后

Question

我正在为一家餐厅做菜单，他们希望在菜单的最后一行有一条橙色的线来指示价格。一切都完成了，只有橙色的行被有背景的文本覆盖。

链接如下：

http://abbababba.gosuuftw.com

谢谢！

Answer 1

Flexbox可以做到这一点：

ul {
  list-style-type: none;
  width: 90%;
  margin: auto;
  padding: 0;
}
.list {
  display: flex;
  align-items: flex-end;
  margin-bottom: .5em;
}
.first {
  margin-right: 0.5em;
  color: #2B91AF;
  flex: 1;
  display: flex;
  align-items: flex-end;
}
.price {
  text-align: right;
  flex: 0 0 4em;
  
}
.first:after {
  content: '';
  height: 1px;
  border-bottom: dashed 1px tomato;
  flex:1;
}

<ul>
  <li class="list">
    <i class='first'>Porterhouse <br/>Steak:</i>
    <i class="price">$150.00</i> 
  </li>
  <li class="list">
    <i class='first'>Baked Potato:</i>
    <i class="price"> $5.00</i> 
  </li>
  <li class="list">
    <i class='first'>Side Salad</i>
    <i class="price"> $25.00</i> 
  </li>
  <li class="list">
    <i class='first'>Soft Drink</i>
    <i class="price"> $10.00</i> 
  </li>
</ul>

Answer 2

Sandrina的解决方案非常好，但我只使用就解决了问题

显示：内联！重要

Answer 3

Flexbox不是最好的选择，因为它支持旧浏览器和safari/firefox上的一些错误。。。我会将:after移动到li，而不是<p>

li:after {
    content: " ";
    height: 1px; /*never use 0.x px. there is no "half pixels", NEVER.*/
    display: block;
    bottom: 0; /* make sure align to bottom */
    /* top: -13px; */
    /* background: #f26622; a line is better*/
    border-bottom: 1px dashed #f26622; /* your fancy dashed line*/
    width: 100%;
    position: relative;
}