在 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

删除列表图标，并将其替换为 pseudo-elements：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 2

z-index 应该可以正常工作。您有两个选择：直线上的负 z-indez 或 <li> 上的正 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 3

一种方法是将边框放在 <li> 元素的 pseudo-element 个子元素上，而不是 <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>

Answer 4

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

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

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

Using a ::before pseudo element on UL to create a time line representation

html

css

pseudo-element

否定z-index:

正 z-index: