css 实现分割线的N种方法

1.伪元素+transform:translateX(-100%); 伪元素 结合 定位

//html 部分
<div class="title">我是一条分割线</div>

//css 部分
<style>
.title{
  position:relative;
  font-size:16px;
  color:#999;
  /* 溢出隐藏 重要*/
  overflow:hidden;
  text-align:center;
}
.title::before,.title::after{
 content:'';
 display:inline-block;
 width:100%;
 height:1px;
 color:#ccc;
 position:absolute;
 top:50%;
}
.title::before{
  margin-left:-10px;
  transform: translateX(-100%);
}
.title::after{
 margin-left:10px;
}
</style>

image.png

2.伪元素+flex (好用)

//html 部分
<div class="title-flex">我是一条分割线</div>

//css 部分
<style>
 .title-flex {
        display: flex;
        align-items: center;
        font-size: 0.4rem;
        color: pink;
    }

    .title-flex::before,
    .title-flex::after {
        content: '';
        flex: 1;
        height: 1px;
        background: pink;
    }

    .title-flex::before {
        margin-right: 0.25rem;
    }

    .title-flex::after {
        margin-left: 0.25rem;
    }
</style>

image.png

3.fieldset+legend ：利用fieldset和legend标签组合，可以天然实现分隔线效果，参考至张鑫旭的这篇文章

//html 部分
<fieldset class="title-fieldset">
        <legend class="inner">我是一条分割线</legend>
 </fieldset>

//css 部分
<style>
  .title-fieldset{
     font-size:0.4rem;
     color:red;
     border:none;
     border-top:1px solid red;
 }
 .title-fieldset .inner{
     margin:0 auto;
     padding:0 0.25rem
 }
</style>

image.png

4.伪元素+table-cell:主要思路为父级设置display:table，伪元素设置display:table-cell，并设置足够大的宽度即可

 // html 部分
 <div class="title-cell">
        <div class="inner">我是一条分割线</div>
  </div>

//css 部分
<style>
.title-cell{
    display: table;
    font-size: 0.4rem;
    color: blue;
}
.title-cell .inner{
    display: table-cell;
    white-space: nowrap;
    padding: 0 0.25rem;
}
.title-cell::before,.title-cell::after{
    content: '';
    display: table-cell;
    width: 249.975rem;/**设置足够大的宽度**/
    overflow: hidden;/***溢出隐藏**/
    background: linear-gradient(#ccc 0,#ccc) center no-repeat;/**这里用线性渐变生成的，也可以用其他方式**/
    background-size: 100% 0.025rem;/** width:100%,height:0.025rem**/
}
</style>

image.png

5.伪元素+border+left/right：这个思路只需要一个伪元素，在文本内部生成一个伪元素，利用足够大的border和相同的负值（绝对定位+left/right）还原位置

//html 部分
 <div class="title-border">
        <span class="inner">我是一条分割线</span>
    </div>

//css 部分
<style>
.title-border{
    text-align: center;
    font-size: 0.35rem;
    color: blueviolet;
    overflow: hidden;
}
.title-border .inner{
    position: relative;
    padding: 0 0.25rem;
}
.title-border .inner::before{
    content: '';
    position: absolute;
    height: 1px;
    top: 50%;
    border-left: 249.975rem solid blue;
    border-right: 249.975rem solid blue;
    right: -249.975rem;
    left: -249.975rem;
}
</style>

image.png

6.伪元素+right:100%:这个实现需要多一层标签，外部仍然是text-align: center，内部文本里添加两个伪元素绝对定位，其中左边的设置距离右边100%（相对于文本标签）即可

//html 部分
<div class="title-right">
    <span class="inner">我是分割线</span>
</div>

//css 部分
<style>
.title-right{
    text-align: center;
    font-size: 0.35rem;
    color: brown;
    overflow: hidden;
}
.title-right .inner{
    position: relative;
}
.title-right .inner::before,.title-right .inner::after{
    position: absolute;
    content: '';
    width: 249.975rem;
    height: 0.025rem;
    background: #ccc;
    top: 50%;
}
.title-right .inner::before{
    right: 100%;
    margin-right: 0.25rem;
}
.title-right .inner::after{
    margin-left: 0.25rem;
}
</style>

image.png

7.3.伪元素+box-shadow/outline+clip-path

//html 部分
<div class="title-clip">我是一条分割线</div>

//css 部分
<style>
.title-clip{
    text-align: center;
    font-size: 0.35rem;
    color: steelblue;
    overflow: hidden;
}
.title-clip::before,.title-clip::after{
    content: '';
    display: inline-block;
    width: 0;
    height: 1px;
    box-shadow: 0 0 0 249.975rem #ccc;
    vertical-align: middle;
}
.title-clip::before{
    margin-right: 0.25rem;
    clip-path: polygon(0 0, -249.975rem 0, -249.975rem 100%, 0 100%);
}
.title-clip::after{
    margin-left: 0.25rem;
    clip-path: polygon(0 0, 249.975rem 0, 249.975rem 100%, 0 100%);
}
</style>

image.png