Vertical line under an image but over a background

Question

As mentioned in the title, I want to make a vertical line in the center, under an image but over a background (just like in this example: http://www.akita.co.uk/computing-history/#decade2000). How can I do it? Thanks.

Answer 1

You could achief this with a pseudo-element. I'll make a quick pen to show you how but basically, you just give the image a z-index of 2, the pseudo-element parent a z-index of 1 and you're good to go.

Keep in mind that the Z-index is inherited from the parent. So by using the -1 on the pseudo-element you are saying, take the parent z-index(2), and substract 1 from that, so you end up with a z-index of 1.

.image{
  position:relative;
  z-index:2;
  width:200px;
  height:200px;
  margin:0 auto;
  padding-top:100px;
  &::before{
    content:'';
    position:absolute;
    width:1px;
    height:300px;
    top:0;
    left:50%;
    background:red;
    z-index:-1;
  }
}

Example in the pen: http://codepen.io/jan-dh/pen/VjOEyq?editors=1100#0