php怎么实现网页分割线,CSS实现自适应分隔线的N种方法

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

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

心想： 可能别人的重点不在这些上面吧

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

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;

}

2.伪元素+flex

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

具体实现如下

html结构为

我是分割线