Creating a line behind elements with CSS :before

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>

Tags:

Css

Recent Posts