html - 图像下方但背景上方的垂直线

Question

如标题中所述，我想在图像下方但在背景上方的中心制作一条垂直线(就像在本例中:http://www.akita.co.uk/computing-history/#decade2000)。我该怎么做？谢谢。

Answer 1

您可以使用伪元素来实现这一点。我会做一个快速的笔来向你展示如何，但基本上，你只需给图像一个 z-index 为 2，伪元素父元素的 z-index 为 1，你就可以开始了。

请记住，Z-index 是从父级继承的。因此，通过在你所说的伪元素上使用 -1，获取父 z-index(2)，并从中减去 1，所以你最终得到的 z-index 为 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;
  }
}

笔中的例子:http://codepen.io/jan-dh/pen/VjOEyq?editors=1100#0