Html 在CSS中使两个圆位于垂直线的顶部

我想在这条线的顶端画一个橙色和蓝色的圆圈

.content wrap{
左边框：1px黑色虚线；
身高：5公分；
位置：绝对位置；
}
.content wrap:：之前{
位置：绝对位置；
顶部：计算值（50%-1px）；
右：0；
左：0；
内容：“；
边界：无；
高度：2倍；
}

---

我没有使用befoe:：effect。看看这是否有帮助。

.content wrap{
显示器：flex；
弯曲方向：立柱；
证明内容：中心；
对齐项目：居中；
宽度：最小含量；
保证金：0自动；
填充：2rem；
边界半径：0.25雷姆；
背景：#3e3e；
}
.圆圈{
颜色：粉红色；
字体大小：1.25rem；
}
.点点{
左边框：0.125rem虚线#f0；
高度：8雷姆；
}
.马克{
颜色：浅蓝色；
字体大小：1.25rem；
}