Html 创建一个与垂直线相连的圆，并在每个圆的右侧显示文本

我正在创建一个与直线相连的圆，并在右侧显示文本。 如果我删除

显示：block

表单类

.info timeline ul li span.timeline circle

则文本显示在右侧，但圆圈显示不正确

你能帮我解决这个问题吗

我需要这样的输出

.info timeline ul{列表样式：无；边距：0；填充：0；}
.info timeline ul li{页边距：10px；}
.info timeline ul li span.timeline-circle{
位置：相对位置；
边框：2个实心#999；
边界半径：100%；
宽度：50px；
线高：50px；
文本对齐：居中；
边缘顶部：50px；
背景色：#fff；
z指数：2；
显示：块；
}
.info时间线ul li跨度。时间线圆圈：之前{
位置：绝对位置；
边框：1px实心#999；
宽度：0；
高度：50px；
显示：块；
内容：''；
左：50%；
z指数：1；
顶部：-54px；
左边距：-1px；
}
.info时间线ul li:第一个子项{margin top:0；}
.info时间线ul li:第一个子项：在{display:none；}之前
.info timeline ul li a{color:#000；}

一,
二,
三,
四,

您可以使用

显示：内联块

代替，您还需要删除边距以便连接：

.info{
列表样式：无；
保证金：0；
填充：0；
}
.info timeline ul li span.timeline-circle{
位置：相对位置；
边框：2个实心#999；
边界半径：100%；
宽度：50px；
线高：50px；
文本对齐：居中；
边缘顶部：50px；
背景色：#fff；
z指数：2；
显示：内联块；
}
.info timeline ul li:不是（：类型的第一个）span.timeline circle:：before{
位置：绝对位置；
边框：1px实心#999；
宽度：0；
高度：50px；
显示：块；
内容：''；
左：50%；
z指数：1；
顶部：-54px；
左边距：-1px；
}
.info.ul li a{
颜色：#000；
}

一,
二,
三,
四,

您能帮我删除上边框吗？它来自

正文

，现在看一下：）但在代码段中显示了它。我需要删除圆圈1的上边框。我猜您可以将此行

。info timeline ul li span.timeline圆圈：before

更改为this

。info timeline ul li span.timeline圆圈：not（：first child）：before

@kojow7和jaunt，你能在下面的链接中提供帮助吗看起来你现在对你所做的事情有了答案。然而，您是否也考虑过使用HTML5画布？