css - 带有 flexbox 的侧水平线

Question

我尝试使用伪元素创建“2”的两条侧线(每侧一条)，但它不起作用。我读到这是因为 flexbox 不呈现空元素。我怎样才能完成我所追求的？

CSS

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

HTML:

<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>

Answer 1

我在这上面花了太长时间，但刚刚想出这个，我希望它能帮助...

HTML

.title::before {
  display: inline-flex;
  content: '';
  border-top: 2px solid #9d9d9d;
  width: 150px;
  height: 12px;
  margin-right: 30px;
}

.title::after {
  display: inline-flex;
  content: '';
  border-top: 2px solid #9d9d9d;
  width: 150px;
  height: 12px;
  margin-left: 30px;
}

<h1 class="title">Your text here</h1>