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

Question

我想在ul 中使用li 元素来实现故事情节的视觉布局，如下所示：

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

我正在使用::before 伪元素在整个 ul 元素中添加一条线，但它在 li 元素的顶部可见，我不希望发生这种情况。我怎样才能让线隐藏在lis 后面并且只在边距间隙之间可见？我已经没有成功地尝试过 Z-index 属性。这是我当前代码的link to a pen。

.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>

Answer 2

移除列表图标，并用伪元素替换它们：http://codepen.io/anon/pen/qRMZyy

.container ul{
  position: relative;
  list-style: none;
}
.container ul::before{
  content: "";
  position: absolute;
  top: 0px;
  bottom: 0px;
  z-index:100;
  border: 1px dashed blue;
}
.container ul li {
  margin: 15px;
  position: relative;
}
.container ul li:before {
  content: "";
  height: 10px;
  width: 10px;
  border-radius: 100%;
  background: #000;
  display: inline-block;
  position: absolute;
  top: 5px;
  z-index: 0;
  left: -20px;
}

Answer 3

z-index 应该可以正常工作。您有两种选择：在线上的否定z-indez 或<li>s 上的肯定z-index。

负 z-index：

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

body {background: #888;}
.container ul::before {border-color: #000;}
.container ul li {color: #FFF;}

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

正 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;
  position: relative;
  z-index: 1;
}

body {background: #888;}
.container ul::before {border-color: #000;}
.container ul li {color: #FFF;}

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

Answer 4

一种方法是将边框放在<li> 元素的伪元素子元素上，而不是<ul> 元素上。不过，这可能不是最好的方法。

.container ul{
  position: relative;
}
.container ul li{
  margin: 2px;
}
.container ul li::after, .container ul li::before {
  content:" ";
  border-left: 1px dashed blue;
  display: block;
  position: relative;
  left: -12px;
  top: 0;
  height: 12px;
}
.container ul li:last-child::after, .container ul li:first-child::before {
  content:"";
  display: none;
}

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