Html 要显示直线之间的间隙吗

我想把一条直线分成两条线，如下所示。实现这一目标的最佳方式是什么

我正在尝试使用hr元素，但无法拆分行

---

你可以试试这个！

。行包装器{
显示器：flex；
柔性流：行；
}
.线路{
边框底部：1px实心rgba（0,0,0,5）；
宽度：150px；
}
#第2行{
左边距：6px；
}

---

在那里，您可以使用伪元素

：：before

和

：：after

.line{
位置：相对位置；
}
.行：：之前{
位置：绝对位置；
内容：“；
高度：2倍；
背景色：红色；
宽度：45%；
/*根据您的需要更改*/
左：0；
}
.行：：之后{
位置：绝对位置；
内容：“；
高度：2倍；
右：0；
背景颜色：蓝色；
宽度：45%；
/*根据您的需要更改*/
}

---

我需要下面这样的行：\uuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuu。

<!-- change the 8px to what ever gap value you want-->
<div style="display: grid; grid-template-columns: 1fr 8px 1fr">
<hr style="width: 100%"/>
<div></div>
<hr  style="width: 100%"/>
</div>