CSS - Vertical timeline, connected to dots - html

Question

This is my timeline code this far, I would like to end the last timeline-post element in a yellow line and then to the last blue dot.
I have tried to add this class .timeline:last-child::after but this does obliviously not work!
.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

You need to apply last-child to timeline-post and not timeline. You need also to set negative value in bottom instead of using height:100% or your line will take the same height of the timeline-post and will never reach the blue dot.
Also never forget to add position:relative to element when using position:absolute with its pseudo-element or any child element.
.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;
}
<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>