CSS實現(xiàn)自適應(yīng)分隔線的N種方法
分割線是網(wǎng)頁中比較常見的一類設(shè)計了，比如說知乎的更多回答
這里的自適應(yīng)是指兩邊的橫線會隨著文字的個數(shù)和父級的寬度自適應(yīng)
偷偷的看了一下知乎的實現(xiàn)，很顯然是用一塊白色背景覆蓋的，加一點背景就露餡了
心想：知乎的前端也不怎么樣？ 可能別人的重點不在這些上面吧
下面列舉幾種更好的實現(xiàn)方式，不會露餡的那種
1.偽元素+transform:translateX(-100%);
主要原理是設(shè)置文本居中text-align: center;，然后給定兩個偽元素，分別絕對定位，那么此時偽元素也是跟隨著水平居中的，設(shè)置足夠的寬度，然后把左邊的往左位移100%就可以了，父級記得超出隱藏。
具體實現(xiàn)如下
html結(jié)構(gòu)為
- <div class="title">我是分割線</div>
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
這個比較好理解了，設(shè)置display:flex，然后兩個偽元素分別鋪滿剩余空間。
具體實現(xiàn)如下
html結(jié)構(gòu)為
- <div class="title">我是分割線</div>
css樣式為
- .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;
- }
CSS分隔線 （偽元素+flex）
3.偽元素+box-shadow/outline+clip-path
同樣利用text-align: center使文本和偽元素居中，然后生成足夠大的box-shadow或者outline，由于不支持單個方向，所以用clip-path或者clip裁剪掉
具體實現(xiàn)如下
html結(jié)構(gòu)為
- <div class="title">我是分割線</div>
css樣式為
- .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%);
- }
CSS分隔線 （偽元素+box-shadow/outline+clip-path）
4.偽元素+right:100%
這個實現(xiàn)需要多一層標簽，外部仍然是text-align: center，內(nèi)部文本里添加兩個偽元素絕對定位，其中左邊的設(shè)置距離右邊100%（相對于文本標簽）即可
具體實現(xiàn)如下
html結(jié)構(gòu)為
- <div class="title">
- <span class="inner">我是分割線</span>
- </div>
css樣式為
- .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;
- }
CSS分隔線 （偽元素+right:100%）
5. border+transform
這個思路可以不用到偽元素，不過需要額外的標簽，給內(nèi)部文本左右足夠大的1px邊框，此時需要設(shè)置line-height:1px，由于內(nèi)部整體以及足夠大了（超過父級），可以使用絕對定位和transform: translateX(-50%)居中
具體實現(xiàn)如下
html結(jié)構(gòu)為
- <div class="title">
- <span class="inner">我是分割線</span>
- </div>
css樣式為
- .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;
- }
CSS分隔線 （border+transform）
6.偽元素+border+left/right
這個思路只需要一個偽元素，在文本內(nèi)部生成一個偽元素，利用足夠大的border和相同的負值（絕對定位+left/right）還原位置
具體實現(xiàn)如下
html結(jié)構(gòu)為
- <div class="title">
- <span class="inner">我是分割線</span>
- </div>
css樣式為
- .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;
- }
CSS分隔線 （偽元素+border+left/right）
7.偽元素+table-cell
主要思路為父級設(shè)置display:table，偽元素設(shè)置display:table-cell，并設(shè)置足夠大的寬度即可
具體實現(xiàn)如下
html結(jié)構(gòu)為
- <div class="title">
- <span class="inner">我是分割線</span>
- </div>
css樣式為
- .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;
- }
CSS分隔線 （偽元素+table-cell）
8.fieldset+legend
利用fieldset和legend標簽組合，可以天然實現(xiàn)分隔線效果，參考至張鑫旭的這篇文章
具體實現(xiàn)如下
html結(jié)構(gòu)為
- <fieldset class="title">
- <legend class="inner">我是分割線</legend>
- </fieldset>
css樣式為
- .title{
- font-size: 14px;
- color: #999;
- border: 0;
- border-top: 1px solid #ccc;
- padding: 0;
- }
- .inner{
- margin: 0 auto;;
- padding: 0 10px;
- }
CSS分隔線 （fieldset+legend）
小結(jié)
上面一共列舉了8種方式來實現(xiàn)分隔線的效果，每種方法思路各不相同，重要的是可以發(fā)散自己的想象力，可能這才是CSS與其他語言所不同的吧~
這里整理了一下，整體效果如下非大家在實際項目中可自行選取所需要的方式
