分割线是网页中比较常见的一类设计了,比如说知乎的更多回答
偷偷的看了一下知乎的实现,很显然是用一块白色背景覆盖的,加一点背景就露馅了
心想: 可能别人的重点不在这些上面吧
下面列举几种更好的实现方式,不会露馅的那种
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结构为
我是分割线