如何在 CSS3 中创建 OR 分隔符？ [复制]答案

【问题标题】：How to create OR separator in CSS3? [duplicate]如何在 CSS3 中创建 OR 分隔符？ [复制]
【发布时间】：2015-10-30 10:33:09
【问题描述】：

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

目前我正在使用 2 个嵌套 div 和一个 hr，这似乎太过分了。

【问题讨论】：

在css中添加一个'after'怎么样？
可以使用:before和:after伪元素

标签： css

【解决方案1】：

Pseudo-elements!

使用::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;
}

&lt;div id="or"&gt;OR&lt;/div&gt;

使用flexbox 代替绝对定位是另一种选择，但支持更差。

【讨论】：

华丽实用！

【解决方案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;
}

&lt;div class="or"&gt; OR &lt;/div&gt;

【讨论】：

【解决方案3】：

html

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

还有css

.separator{
    position: relative;
    text-align: center;
}

.separator label{
    background-color:#fff;
    padding: 0 0.4em;
    position: relative;
}

.separator:before{
    content: '';
    border-style: solid;
    border-width: 0 0 1px 0;
    position: absolute;
    left: 0;
    top: 50%;
    width: 100%;
    border-color:black;
}

演示 http://jsfiddle.net/0e6j7ruc/

【讨论】：

【解决方案4】：

HTML

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

CSS

.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;
}

小提琴：https://jsfiddle.net/k9jmgdyq/1/

【讨论】：