使用CSS在元素后面创建一条线:之前

Question

有可能创建一条线(下面的灰线),它的父元素后面的元素后面有:before这些元素吗？

我有什么:http://jsfiddle.net/2Qn4Y/1/

Answer 1

您可以创建一个新的父元素（div）来附加一个类。这是一个示例：http : //jsfiddle.net/2Qn4Y/6/

.gray-bar {
  position: relative;
}

.gray-bar::after {
  content: "";
  background-color: lightgray;
  position: absolute;
  width: 5px;
  left: 33px;
  top: 0;
  bottom: 10px;
  z-index: -1;
}

.table {
  display: table;
  height: 50px;
  font-family: sans-serif;
  margin: 20px 0;
}

.row {
  display: table-cell;
  vertical-align: middle;
  padding: 0 10px;
}

.row.fluid {
  width: 100%;
  background: #f4f4f4;
  border-radius: 5px;
}

<div class="gray-bar">
  <div class="table">
    <div class="row fixed"><img src="http://i.imgur.com/AKmmXE4.gif" /></div>
    <div class="row fluid">Hello, I'm Mickey!</div>
  </div>

  <div class="table">
    <div class="row fixed"><img src="http://i.imgur.com/f6948mH.gif" /></div>
    <div class="row fluid">I'm Goofy!</div>
  </div>

  <div class="table">
    <div class="row fixed"><img src="http://i.imgur.com/Dm2vlrA.gif" /></div>
    <div class="row fluid">I'm Donald Duck!</div>
  </div>

  <div class="table">
    <div class="row fixed"><img src="http://i.imgur.com/vRggi12.gif" /></div>
    <div class="row fluid">Whoof!</div>
  </div>
</div>