Боковые горизонтальные линии с 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

Вы можете попробовать что-то вроде этого,

div{
display: flex;
align-items: center;
justify-content: space-around;
}
.horiz{
  position: relative;
}
.horiz::before{
  content: '';
  position: absolute;
  width:100px;
  border: 1px solid black;
  top:10px;
  right: 100%;
  
  
}
.horiz::after{
  content: '';
  position: absolute;
  width: 100px;
  border: 1px solid black;
  top:10px;
  left: 100%;
}

<div>
  <p class="pipe">1</p>
   <p class="pipe horiz">2</p>
  <p class="pipe">3</p>
</div>