使用CSS构建时间线

我正在努力实现以下目标：

我仍然存在的问题是第一个元素之前和最后一个元素之后的行应该被隐藏

第二个问题是，即使我使用带有对齐项目和对齐内容的flexbox，数字也没有垂直居中，如果我将图片放大一点，您可以看到有一些不同：

不缩放的差异约为2px~3px

这就是我所尝试的：

.container{
边缘顶部：60像素；
位置：相对位置；
}
ol{
计数器复位：部分；
列表样式类型：无；
边框顶部：1px实心#D9DEEA；
填充：0；
利润率：36px 0 210px 0；
}
李{
浮动：左；
宽度：20%；
填料顶部：calc（58px/2）；
位置：相对位置；
字体系列：“安东尼奥”，无衬线；
字号：700；
显示器：flex；
弯曲方向：立柱；
对齐项目：居中；
}
李：以前{
反增量：节；
内容：计数器（第节“.”）；
宽度：56px；
高度：56px；
背景：#fff；
边框：2个虚线#D9DEEA；
边界半径：50%；
盒影：0 6px#fff；
位置：绝对位置；
顶部：-30.5px；
左：计算（50%-30px）；
显示器：flex；
证明内容：中心；
对齐项目：居中；
线高：34px；
字体大小：24px；
}
.头衔{
利润率：6px0；
线高：30px；
字母间距：-0.77px；
字体大小：25px；
显示：块；
文本对齐：居中；
}
.插图{
显示：块；
宽度：165px；
高度：140像素；
显示器：flex；
对齐项目：居中；
证明内容：中心；
背景色：#E6E9F0；
}

洛雷姆。


Lorem，ipsum。


Lorem，ipsum dolor。


乱数假文。


Lorem，ipsum dolor。

我不确定如何解决li：：before元素的样式问题，但这里有一个解决方案，可以解决时间线不超过1或5的问题。将：：before元素添加到ol元素

编辑：解决方案来源于

.container{
边缘顶部：60像素；
位置：相对位置；
}
ol{
计数器复位：部分；
列表样式类型：无；
填充：0；
利润率：36px 0 210px 0；
}
ol:以前{
内容：“；
高度：10px；
宽度：90%；
位置：绝对位置；
顶部：-10px；
左：5%；
/*或100像素*/
边框底部：1px纯品红色；
}
李{
浮动：左；
宽度：20%；
填料顶部：calc（58px/2）；
位置：相对位置；
字体系列：“安东尼奥”，无衬线；
字号：700；
显示器：flex；
弯曲方向：立柱；
对齐项目：居中；
}
李：以前{
反增量：节；
内容：计数器（第节“.”）；
宽度：56px；
高度：56px；
背景：#fff；
边框：2个虚线#D9DEEA；
边界半径：50%；
盒影：0 6px#fff；
位置：绝对位置；
顶部：-30.5px；
左：计算（50%-30px）；
显示器：flex；
证明内容：中心；
对齐项目：居中；
线高：34px；
字体大小：24px；
}
.头衔{
利润率：6px0；
线高：30px；
字母间距：-0.77px；
字体大小：25px；
显示：块；
文本对齐：居中；
}
.插图{
显示：块；
宽度：165px；
高度：140像素；
背景：url（“../Images/API_EDI/catalog bg.png”）无重复中心；
显示器：flex；
对齐项目：居中；
证明内容：中心；
背景色：#E6E9F0；
}

洛雷姆。


Lorem，ipsum。


Lorem，ipsum dolor。


乱数假文。


Lorem，ipsum dolor。

我不确定如何解决li：：before元素的样式问题，但这里有一个解决方案，可以解决时间线不超过1或5的问题。将：：before元素添加到ol元素

编辑：解决方案来源于

.container{
边缘顶部：60像素；
位置：相对位置；
}
ol{
计数器复位：部分；
列表样式类型：无；
填充：0；
利润率：36px 0 210px 0；
}
ol:以前{
内容：“；
高度：10px；
宽度：90%；
位置：绝对位置；
顶部：-10px；
左：5%；
/*或100像素*/
边框底部：1px纯品红色；
}
李{
浮动：左；
宽度：20%；
填料顶部：calc（58px/2）；
位置：相对位置；
字体系列：“安东尼奥”，无衬线；
字号：700；
显示器：flex；
弯曲方向：立柱；
对齐项目：居中；
}
李：以前{
反增量：节；
内容：计数器（第节“.”）；
宽度：56px；
高度：56px；
背景：#fff；
边框：2个虚线#D9DEEA；
边界半径：50%；
盒影：0 6px#fff；
位置：绝对位置；
顶部：-30.5px；
左：计算（50%-30px）；
显示器：flex；
证明内容：中心；
对齐项目：居中；
线高：34px；
字体大小：24px；
}
.头衔{
利润率：6px0；
线高：30px；
字母间距：-0.77px；
字体大小：25px；
显示：块；
文本对齐：居中；
}
.插图{
显示：块；
宽度：165px；
高度：140像素；
背景：url（“../Images/API_EDI/catalog bg.png”）无重复中心；
显示器：flex；
对齐项目：居中；
证明内容：中心；
背景色：#E6E9F0；
}

洛雷姆。


Lorem，ipsum。


Lorem，ipsum dolor。


乱数假文。


Lorem，ipsum dolor。

我终于找到了