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/

Nico O · Accepted Answer · 2019-06-07T09:25:57.347

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>

score 1 · Answer 2 · edited May 23 '17 at 12:24

1

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.

edited May 23 '17 at 12:24

Community

1
1

answered Mar 19 '14 at 18:29

Josh Crozier

233,099
56
391
304

1

Nice, really clean and repsonsive. But seems to be broken in Firefox. (Table `position: relative;` bug) – Nico O Mar 19 '14 at 18:30
@NicoO 1+ Since yours works in FF.. Thanks for pointing that out. I've experienced that bug in FF before but I'm not sure how I fixed it. Any ideas? – Josh Crozier Mar 19 '14 at 18:35
I like your solution way better. But this bug is really annoying ... I don't think there is a workaround for this use case... Hopefully someone prove me wrong – Nico O Mar 19 '14 at 18:37
1

@NicoO It's an ugly solution [(example)](http://jsfiddle.net/RSs85/) .. http://stackoverflow.com/questions/5148041/does-firefox-support-position-relative-on-table-elements – Josh Crozier Mar 19 '14 at 18:48

G-Cyrillus · Answer 3 · 2014-03-19T19:24:18.310

a wrapper and a background works fine too: http://jsfiddle.net/2Qn4Y/60/

<div class="lined">
<!-- here your divs -->
</div>

gradient version :

.lined {
    background:linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0) 32px, #DADADA 32px, #DADADA 38px, rgba(255, 255, 255, 0) 38px, rgba(255, 255, 255, 0));
    /* gradient can be a few pix gray image repeated for older brower*/

}
img {
    vertical-align:top;/* to avoid gap underneath*/
}

image version http://jsfiddle.net/2Qn4Y/63/ :

.lined {
    background:url(http://dummyimage.com/6x2/dadada/dadada) repeat-y  32px
}
img {
    vertical-align:top;
}

Arbel · Answer 4 · 2014-03-19T19:03:52.210

0

DEMO

Simply add this to your CSS:

.table{
    position: relative;
}

.table:before{
    content: "";
    height: 40px;
    border-left: 5px solid #ddd;
    position: absolute;
    margin-left: 32px;
    margin-top: -35px;
    z-index: -1;
}
.table:first-child::before{
    border-left: none;
}

Note: position: relative; on .table and also position: absolute; and z-index: -1; on :before guarantee that the pseudo element created by :before will not overlap the actual elements.

edited Mar 19 '14 at 19:03

answered Mar 19 '14 at 18:36

Arbel

30,599
2
28
29

:last-child is not supported in IE8 – JohanVdR Mar 19 '14 at 18:57
@Sigma Correct, updated the answer to be compatible with IE8, too. – Arbel Mar 19 '14 at 19:03

score 0 · Answer 5 · answered Mar 19 '14 at 18:41

here is the working Demo. Fully responsive No matter how many icons and the data has added. the layout will not be affected.

div.table:last-child:before{border:0;} /*this will remove the border from the last child*/

div.table:before{
position:absolute;
content: " ";
left:42px;
height:22%;
border-left:6px solid #D3D3D3;
 z-index:-1; /*this negative value required to put the line behind the image*/
}

JohanVdR · Answer 6 · 2014-03-19T19:00:35.527

0

http://jsfiddle.net/2Qn4Y/61/
http://jsfiddle.net/2Qn4Y/61/show No need for extra containers.

.table {
    position: relative;
}
.table:after {
    background: none repeat scroll 0 0 #DADADA;
    content: "";
    height: 100%;
    left: 34px;
    position: absolute;
    top: -24px;
    width: 4px;
    z-index: -1;
}
.table:first-child:after {
   content: "";
   display: none;
}

edited Mar 19 '14 at 19:00

answered Mar 19 '14 at 18:48

JohanVdR

2,880
1
15
16

Creating a line behind elements with CSS :before

6 Answers6

DEMO