优点:自适应
是指两边的横线会随着文字的个数和父级的宽度自适应
伪元素+flex
<div class="title">我是分割线</div>
设置display:flex,然后两个伪元素分别铺满剩余空间。
.title{
position: relative;
text-align: center;
overflow: hidden;
font-size: 14px;
color: #999;
}
.title::before,.title::after{
content: '';
display: inline-block;
width: 100%;
height: 1px;
position: absolute;
background: #ccc;
top: 50%;
}
.title::before{
margin-left: -10px;
transform: translateX(-100%);
}
.title::after{
margin-left: 10px;
}