使用伪元素连接的时间线 | 星雨笔录

核心： 时间线由竖线与节点组成；::before 可绘制每项的圆形节点。

最小示例：

.timeline { border-left: 2px solid #ccc; padding-left: 24px; }
.timeline li { position: relative; }
.timeline li::before { content: ""; position: absolute; left: -31px; top: 6px; width: 10px; height: 10px; background: orange; border-radius: 50%; }

学完能做： 利用伪元素绘制节点连接时间线。