html - CSS - 垂直线

Question

我正在尝试创建一个教育时间表。应该有一条垂直线(红色)从“毕业帽”后面开始，然后穿过所有时间线后(绿色)。

这是我到目前为止得到的:

.iconspace {
    position: relative;
    width: 40px;
    height: 40px;
    text-align: center;
    margin: 0 auto;
    border-radius: 50%;
    background-color: #25b5f1;
    z-index: 7;
}

.iconspace i {
    font-size: 18px;
    color: #FFFFFF;
    line-height: 40px;
}

.iconspace:after, .iconspace::after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 49.8%;
    width: 3px;
    height: 100%;
    background-color: RED;
    z-index: 5;
}

.timeline-post {
  height: 100px;
  width: 200px;
  background-color: green;
  margin: 0 auto;
  margin-top: 20px;
}

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/>
<h3 class="entry-title" style="text-align: center;">EDUCATION</h3><span class="border"></span>
<div class="timeline">
<div class="iconspace"><i class="fa fa-graduation-cap"></i></div></div>

<div class="timeline-post">
Test 1
</div>

<div class="timeline-post">
Test 2
</div>

<div class="timeline-post">
Test 3
</div>
</div>

Answer 1

您需要将伪元素应用于时间轴帖子的容器而不是图标，因此您可以改为这样做:

您可以根据需要更改 z-index 值(高于或低于绿色元素)

.iconspace {
  position: relative;
  width: 40px;
  height: 40px;
  text-align: center;
  margin: 0 auto;
  border-radius: 50%;
  background-color: #25b5f1;
  z-index: 7;
}

.iconspace i {
  font-size: 18px;
  color: #FFFFFF;
  line-height: 40px;
}

.timeline {
  position: relative;
}

.timeline:before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 49.8%;
  width: 3px;
  height: 100%;
  background-color: RED;
  z-index: -5;
}

.timeline-post {
  height: 100px;
  width: 200px;
  background-color: green;
  margin: 0 auto;
  margin-top: 20px;
}

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet" />
<h3 class="entry-title" style="text-align: center;">EDUCATION</h3><span class="border"></span>
<div class="timeline">
  <div class="iconspace"><i class="fa fa-graduation-cap"></i></div>

  <div class="timeline-post">
    Test 1
  </div>

  <div class="timeline-post">
    Test 2
  </div>

  <div class="timeline-post">
    Test 3
  </div>
</div>