CSS实现自适应分隔线的N种方法

分割线是网页中比较常见的一类设计了，比如说知乎的更多回答

成都创新互联公司-专业网站定制、快速模板网站建设、高性价比丰满网站开发、企业建站全套包干低至880元,成熟完善的模板库,直接使用。一站式丰满网站制作公司更省心,省钱,快速模板网站建设找我们，业务覆盖丰满地区。费用合理售后完善，10年实体公司更值得信赖。

这里的自适应是指两边的横线会随着文字的个数和父级的宽度自适应

偷偷的看了一下知乎的实现，很显然是用一块白色背景覆盖的，加一点背景就露馅了

心想：知乎的前端也不怎么样？可能别人的重点不在这些上面吧

下面列举几种更好的实现方式，不会露馅的那种

1.伪元素+transform:translateX(-100%);

主要原理是设置文本居中text-align: center;，然后给定两个伪元素，分别绝对定位，那么此时伪元素也是跟随着水平居中的，设置足够的宽度，然后把左边的往左位移100%就可以了，父级记得超出隐藏。

具体实现如下

html结构为

 
 
 
 
  
  
  
  我是分割线

css样式为

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

CSS分隔线（伪元素+transform）

2.伪元素+flex

这个比较好理解了，设置display:flex，然后两个伪元素分别铺满剩余空间。

具体实现如下

html结构为

 
 
 
 
  
  
  
  我是分割线

.title{
display: flex;
align-items: center;
font-size: 14px;
color: #999;
}
.title::before,.title::after{
content: '';
flex: 1;
height: 1px;
background: #ccc;
}
.title::before{
margin-right: 10px;
}
.title::after{
margin-left: 10px;
}

同样利用text-align: center使文本和伪元素居中，然后生成足够大的box-shadow或者outline，由于不支持单个方向，所以用clip-path或者clip裁剪掉

.title{
text-align: center;
font-size: 14px;
color: #999;
overflow: hidden;
}
.title::before,.title::after{
content: '';
display: inline-block;
width: 0;
height: 1px;
box-shadow: 0 0 0 9999px #ccc;
vertical-align: middle;
}
.title::before{
margin-right: 10px;
clip-path: polygon(0 0, -9999px 0, -9999px 100%, 0 100%);
}
.title::after{
margin-left: 10px;
clip-path: polygon(0 0, 9999px 0, 9999px 100%, 0 100%);
}

.title{
text-align: center;
font-size: 14px;
color: #999;
overflow: hidden;
}
.inner{
position: relative;
}
.inner::before,.inner::after{
position: absolute;
content: '';
width: 9999px;
height: 1px;
background: #ccc;
top: 50%;
}
.inner::before{
right: 100%;
margin-right: 10px;
}
.inner::after{
margin-left: 10px;
}

.title{
position: relative;
text-align: center;
font-size: 14px;
color: #999;
overflow: hidden;
padding: .6em 0;/**把高度撑起来**/
}
.inner{
position: absolute;
left: 50%;
transform: translateX(-50%);
white-space: nowrap;
line-height: 1px;
border-left: 9999px solid #ccc;
border-right: 9999px solid #ccc;
padding: 0 10px;
}

.title{
text-align: center;
font-size: 14px;
color: #999;
overflow: hidden;
}
.inner{
position: relative;
padding: 0 10px;
}
.inner::before{
content: '';
position: absolute;
height: 1px;
top: 50%;
border-left: 9999px solid #ccc;
border-right: 9999px solid #ccc;
right: -9999px;
left: -9999px;
}

.title{
display: table;
font-size: 14px;
color: #999;
}
.inner{
display: table-cell;
white-space: nowrap;
padding: 0 10px;
}
.title::before,.title::after{
content: '';
display: table-cell;
width: 9999px;
overflow: hidden;
background: linear-gradient(#ccc 0,#ccc) center no-repeat;/**这里用线性渐变生成的，也可以用其他方式**/
background-size: 100% 1px;
}

.title{
font-size: 14px;
color: #999;
border: 0;
border-top: 1px solid #ccc;
padding: 0;
}
.inner{
margin: 0 auto;;
padding: 0 10px;
}