Html CSS-垂直时间线，连接到点

这是到目前为止我的时间线代码，我想用黄线结束最后一个时间线帖子元素，然后是最后一个蓝点

我试图添加这个类。时间线：last child:：after，但这显然不起作用

.iconspace{
位置：相对位置；
宽度：40px；
高度：40px；
文本对齐：居中；
保证金：0自动；
边界半径：50%；
背景色：#25b5f1；
z指数：7；
}
i.我要去看一看{
字号：18px；
颜色：#FFFFFF；
线高：40px；
}
.时间表{
位置：相对位置；
}
.时间表：之前{
内容：“；
显示：块；
位置：绝对位置；
排名：0；
底部：0；
左：49.8%；
宽度：3倍；
身高：100%；
背景色：红色；
z指数：-5；
}
.时间轴帖子{
高度：100px；
宽度：200px；
背景颜色：绿色；
保证金：0自动；
边缘顶部：20px；
}
.时间线：最后一个孩子：：之后{
内容：“；
显示：块；
位置：绝对位置；
排名：0；
底部：0；
左：49.8%；
宽度：3倍；
身高：100%；
背景颜色：黄色；
z指数：-5；
}
.时间表：之后{
位置：绝对位置；
内容：“；
显示：内联块；
宽度：15px；
高度：15px；
线高：1；
背景色：#25b5f1；
边缘顶部：50px；
左：49.8%；
边界半径：50%；
文本对齐：居中；
}

教育
测试1
测试2
测试3

您需要将

最后一个孩子

应用于

时间线帖子

，而不是

时间线

。您还需要在底部设置负值，而不是使用

高度：100%

，否则您的行将与时间线帖子的高度相同，并且永远不会到达蓝点

另外，在将

position:absolute

与其伪元素或任何子元素一起使用时，不要忘记将

position:relative

添加到元素中

.iconspace{
位置：相对位置；
宽度：40px；
高度：40px；
文本对齐：居中；
保证金：0自动；
边界半径：50%；
背景色：#25b5f1；
z指数：7；
}
i.我要去看一看{
字号：18px；
颜色：#FFFFFF；
线高：40px；
}
.时间表{
位置：相对位置；
}
.时间表：之前{
内容：“；
显示：块；
位置：绝对位置；
排名：0；
底部：0；
左：49.8%；
宽度：3倍；
身高：100%；
背景色：红色；
z指数：-5；
}
.时间轴帖子{
高度：100px；
宽度：200px；
背景颜色：绿色；
保证金：0自动；
边缘顶部：20px；
}
.时间表：之后{
位置：绝对位置；
内容：“；
显示：内联块；
宽度：15px；
高度：15px；
线高：1；
背景色：#25b5f1；
边缘顶部：50px；
左：49.8%；
边界半径：50%；
文本对齐：居中；
}
.时间线。时间线帖子{
位置：相对位置；
}
.timeline.timeline post:最后一个孩子：：之后{
内容：“；
显示：块；
位置：绝对位置；
排名：0；
底部：-50px；
左：49.8%；
宽度：3倍；
背景颜色：黄色；
z指数：-5；
}

教育
测试1
测试2
测试3

@DanieleFois您需要先阅读问题。。。标题包含垂直和点，但与您提到的标题无关好吧，我收回了flag@Fjott不客气地说：“顺便说一下，如果你仍然需要同一个代码的帮助，你可以考虑在这里添加一些评论，我会很乐意帮助你的。”这将避免你用相同的代码创建另一个问题。实际上，我还有一个问题，你可能可以帮助我。当堆叠两条时间线时，底部的时间线标题将与.timeline.timeline post:last child:：see@Fjott之后，您可能需要添加一些边距，因此您可以添加此

h3{margin top:80px；}

I used@media screen and（最大宽度：768px）{h3.timeline-main-title{margin top:80px！important；}你看起来是一个非常有技巧和乐于助人的人，非常感谢：）