Creating a line behind elements with CSS :before

Question

It is possible to create a line (the gray line below) with :before that appers behind elements from it's parent div?

What I have: http://jsfiddle.net/2Qn4Y/1/

Answer 1

You can create a new parent element (div) to attach a class to. Here is an example: 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>

Answer 2

Use :not(:last-child) to exclude the last .table element from the selection. From there, just add an absolutely positioned :after pseudo element to the .row.fixed element - it should be relative to the parent. As for positioning, use left:50% and margin-left:-3px (half the width).

UPDATED EXAMPLE HERE

.table:not(:last-child) .row.fixed:after {
    content:'';
    width: 6px;
    height: 30px;
    background: #D3D3D3;
    position: absolute;
    left: 50%;
    margin: -4px 0 0 -3px;
    top: 100%;
}

As Nico O points out, there is a bug in FF with relative/absolutely positioned table element. Here is one possible workaround using the CSS from above.