CSS - 垂直时间轴，连接到点

Question

这是我的时间轴代码到目前为止，我想以黄线结束最后一个timeline-post元素，然后到最后一个蓝点。

我曾尝试添加此类 .timeline：last-child :: after ，但这确实无法正常工作！

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

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

.timeline:after {
    position: absolute;
    content: "";
    display: inline-block;
    width: 15px;
    height: 15px;
    line-height: 1;
    background-color: #25b5f1;
    margin-top: 50px;
	left: 49.8%;
    border-radius: 50%;	
	text-align: center;
}

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

Answer 1

您需要将last-child应用于timeline-post而不是timeline。您还需要在底部设置负值而不是使用height:100%，否则您的线将采用时间轴相同的高度，并且永远不会达到蓝点。

当使用position:relative及其伪元素或任何子元素时，也永远不要忘记向元素添加position:absolute。

＆＃13;

＆＃13;

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

.timeline:after {
  position: absolute;
  content: "";
  display: inline-block;
  width: 15px;
  height: 15px;
  line-height: 1;
  background-color: #25b5f1;
  margin-top: 50px;
  left: 49.8%;
  border-radius: 50%;
  text-align: center;
}

.timeline .timeline-post {
  position: relative;
}

.timeline .timeline-post:last-child::after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  bottom: -50px;
  left: 49.8%;
  width: 3px;
  background-color: YELLOW;
  z-index: -5;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;