Css 带flexbox的侧面水平线

我尝试使用伪元素创建两条边线，从2的每一侧创建一条边线，但它不起作用。我读到它是因为flexbox不渲染空元素。我怎样才能完成我所追求的

CSS

HTML:

---

你可以试试这样的

div{ 显示器：flex； 对齐项目：居中； 证明内容：周围的空间； } 霍里斯先生{ 位置：相对位置； } 霍里兹：以前{ 内容：； 位置：绝对位置； 宽度：100px； 边框：1px纯黑； 顶部：10px； 右：100%； } 霍里兹：在{ 内容：； 位置：绝对位置； 宽度：100px； 边框：1px纯黑； 顶部：10px； 左：100%； } 1

2

3

---

我花了太长时间在这个问题上，但刚刚提出了这个，我希望它有帮助

HTML

.标题：：之前{ 显示：内联flex； 内容：； 边框顶部：2个实心9D9D； 宽度：150px； 高度：12px； 右边距：30px； } .标题：：之后{ 显示：内联flex； 内容：； 边框顶部：2个实心9D9D； 宽度：150px； 高度：12px； 左边距：30px； } 您的文本在此 div{ 显示器：flex； 对齐项目：居中； 证明内容：周围的空间； } 霍里斯先生{ 位置：相对位置； } .horiz:：之前，.horiz:：之后{ 内容：； 位置：绝对位置； 宽度：100px； 边框：1px纯黑； 顶部：10px； 右：100%； } 霍里兹：在{ 左：100%； } 1

2

3

---

谢谢，但是它们需要水平并延伸到1和3我不确定你想要什么，你不能简单地用破折号吗？我想要这样的东西，从2到1和3：是的！但是一直到1和3，虽然我想我可以扩展widthhi@Jone，谢谢你的回答，但是如果你能解释你的代码而不是仅仅给出一个答案，那就太好了

.stepTag{
    font-weight: 500;
    font-size: 1.1em;
    border-radius: 50%;
    width: 4%;
    height:4%;
    padding: 0.5em;
    background: #E4002B;
    color: #FFFFFF;
}

<div style={{display: "flex", alignItems:"center", justifyContent:"space-around"}}>
  <p className={`${s.stepTag}`}>1</p>}
    {<p className={`${s.stepTag}`}>2</p>}
  <p className={`${s.stepTag}`}>3</p>
</div>