本文介绍了三种使用CSS实现自适应分隔线的方法：1) 通过伪元素结合`transform: translateX(-100%)`；2) 利用伪元素与`flex`布局；3) 结合伪元素、`box-shadow`/`outline`和`clip-path`。每种方法都提供了具体的HTML结构和CSS样式示例，确保在不同场景下能自适应地展示分隔线。
分割线是网页中比较常见的一类设计了，比如说知乎的更多回答
这里的自适应是指两边的横线会随着文字的个数和父级的宽度自适应
偷偷的看了一下知乎的实现，很显然是用一块白色背景覆盖的，加一点背景就露馅了
心想：知乎的前端也不怎么样？ 可能别人的重点不在这些上面吧
下面列举几种更好的实现方式，不会露馅的那种
1.伪元素+transform:translateX(-100%);
主要原理是设置文本居中text-align: center;，然后给定两个伪元素，分别绝对定位，那么此时伪元素也是跟随着水平居中的，设置足够的宽度，然后把左边的往左位移100%就可以了，父级记得超出隐藏。
具
最低0.47元/天 解锁文章
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
