使用::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而非绝对定位是另一个选项,但是其支持性较差。
.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>
HTML
<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;
}
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;
}
:before
和:after
伪元素。 - Billy