如何在CSS3中创建或分隔符？

在CSS3中使用最少的容器创建以下内容的最佳方法是什么

目前，我正在使用两个嵌套的div和一个

hr

，这似乎太过分了。

使用，您只需使用一个容器即可进行管理

您需要根据自己的环境调整值，但一般的想法是将伪元素绝对放置在容器中

#或{
位置：相对位置；
宽度：300px；
高度：50px；
线高：50px；
文本对齐：居中；
}
#或者之前，
#在……之后{
位置：绝对位置；
宽度：130px；
高度：1px；
顶部：24px；
背景色：#aaa；
内容：''；
}
#之前{
左：0；
}
#在……之后{
右：0；
}

或

html

<div class="separator"><label>OR</label></div>

演示 HTML

<div class="separator"></div>

小提琴：

。或{
显示器：flex；
证明内容：中心；
对齐项目：居中；
颜色：灰色；
}
.或：之后，
.或：之前{
内容：“；
显示：块；
背景：灰色；
宽度：30%；
高度：1px；
利润率：0.10px；
}

---

或

在css中添加一个'after'怎么样？您可以使用

：before

和

：after

伪元素组织和功能！

<div class="separator"></div>

.separator {
    width: 100%;
    border-bottom: solid 1px;
    position: relative;
    margin: 30px 0px;
}

.separator::before {
    content: "OR";
    position: absolute;
    left: 47%;
    top: -8px;
    background-color: #fff;
    padding: 0px 10px;
}