在UL上使用:: before伪元素来创建时间线表示

Question

我想使用li里面的元素实现一个故事线的视觉布局,ul看起来像这样:

li-element1
 .
 .
li-element2
 .
 .
li-element3

我正在使用::before伪元素在整个ul元素中添加一条线,但它在li元素顶部可见,我不想发生这种情况.如何将线条隐藏在lis 后面,只能在边距间隙中看到？我已经尝试过Z-index属性但未成功.这是我当前代码的笔链接.

.container ul{
  position: relative;
}
.container ul::before{
  content: "";
  position: absolute;
  top: 0px;
  bottom: 0px;
  border: 1px dashed blue;
}
.container ul li{
  margin: 15px;
}

<div class="container">
  <ul>
    <li>First</li>
    <li>Second</li>
    <li>Third</li>
    <li>Fourth</li>
  </ul>
</div>

更新

在最初的问题中,我忽略了这样一个事实,即li元素中的子弹实际上并不是li元素本身的一部分,因此实际上并没有受到任何背景颜色的影响.现在考虑到这一点并实现建议的答案,结合使用z-index,背景颜色,边距和填充,并另外设置ul list-style-type: none我已将代码更新为:

.container ul{
  padding: 0px;
  margin: 0px;
  position: relative;
  list-style-type: none;
}
.container ul::before{
  content: "";
  position: absolute;
  top: 0px;
  bottom: 0px;
  left: 16px;
  border: 1px dotted red;
}
.container ul li{
  margin: 15px;
  padding: 0px 0px;
  position: relative;
  z-index: 1;
  background-color: white;
}

<div class="container">
  <ul>
    <li>• First</li>
    <li>• Second</li>
    <li>• Third</li>
    <li>• Fourth</li>
  </ul>
</div>

Answer 1

您可以使用白色背景、填充和相对定位来隐藏每个项目的部分时间线：

.container ul{
  position: relative;
}
.container ul::before{
  content: "";
  position: absolute;
  top: 0px;
  bottom: 0px;
  border: 1px dashed red;
}
.container ul li {
  display: block;
  position: relative;
  left: -20px;
  background-color: white;
  padding: 5px;
  padding-left: 20px;
  margin: 40px 0px;
}

<div class="container">
  <ul>
    <li>First</li>
    <li>Second</li>
    <li>Third</li>
    <li>Fourth</li>
  </ul>
</div>