【CSS】510- CSS實現自適應分隔線的N種方法
- 2020 年 3 月 2 日
- 筆記
作者：XboxYan https://github.com/XboxYan/notes/issues/12
分割線是網頁中比較常見的一類設計了，比如說知乎的更多回答
這裡的自適應是指兩邊的橫線會隨着文字的個數和父級的寬度自適應
偷偷的看了一下知乎的實現，很顯然是用一塊白色背景覆蓋的，加一點背景就露餡了
心想：知乎的前端也不怎麼樣？ 可能別人的重點不在這些上面吧
下面列舉幾種更好的實現方式，不會露餡的那種
1.偽元素+transform:translateX(-100%);
主要原理是設置文本居中text-align: center;，然後給定兩個偽元素，分別絕對定位，那麼此時偽元素也是跟隨着水平居中的，設置足夠的寬度，然後把左邊的往左位移100%就可以了，父級記得超出隱藏。
具體實現如下
html結構為
<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
這個比較好理解了，設置display:flex，然後兩個偽元素分別鋪滿剩餘空間。
具體實現如下
html結構為
<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裁剪掉
具體實現如下
html結構為
<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%
這個實現需要多一層標籤，外部仍然是text-align: center，內部文本里添加兩個偽元素絕對定位，其中左邊的設置距離右邊100%（相對於文本標籤）即可
具體實現如下
html結構為
<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
這個思路可以不用到偽元素，不過需要額外的標籤，給內部文本左右足夠大的1px邊框，此時需要設置line-height:1px，由於內部整體以及足夠大了（超過父級），可以使用絕對定位和transform: translateX(-50%)居中
具體實現如下
html結構為
<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
這個思路只需要一個偽元素，在文本內部生成一個偽元素，利用足夠大的border和相同的負值（絕對定位+left/right）還原位置
具體實現如下
html結構為
<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
主要思路為父級設置display:table，偽元素設置display:table-cell，並設置足夠大的寬度即可
具體實現如下
html結構為
<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標籤組合，可以天然實現分隔線效果，參考至張鑫旭的這篇文章
具體實現如下
html結構為
<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）
小結
上面一共列舉了8中方式來實現分隔線的效果，每種方法思路各不相同，重要的是可以發散自己的想像力，可能這才是CSS與其他語言所不同的吧~
這裡整理了一下，整體效果如下非大家在實際項目中可自行選取所需要的方式
