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

Question

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

目前我正在使用2个嵌套的div,hr这看起来过分了.

Answer 1

伪元素!

使用::before和::after您只需一个容器即可管理.

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

#or {
  position: relative;
  width: 300px;
  height: 50px;
  
  line-height: 50px;
  text-align: center;
}

#or::before,
#or::after {
  position: absolute;
  width: 130px;
  height: 1px;
  
  top: 24px;
  
  background-color: #aaa;
  
  content: '';
}

#or::before {
  left: 0;
}

#or::after {
  right: 0;
}

<div id="or">OR</div>

使用flexbox而不是绝对定位是另一种选择,支持更差.

Answer 2

.or {
  display:flex;
  justify-content:center;
  align-items: center;
  color:grey;
}

.or:after,
.or:before {
    content: "";
    display: block;
    background: grey;
    width: 30%;
    height:1px;
    margin: 0 10px;
}

<div class="or"> OR </div>