CSS如何实现自适应分隔线
这篇文章将为大家详细讲解有关CSS如何实现自适应分隔线,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。
创新互联公司主要从事成都网站制作、做网站、外贸营销网站建设、网页设计、企业做网站、公司建网站等业务。立足成都服务庄河,10多年网站建设经验,价格优惠、服务专业,欢迎来电咨询建站服务:13518219792
分割线是网页中比较常见的一类设计了,比如说知乎的更多回答
这里的自适应是指两边的横线会随着文字的个数和父级的宽度自适应
偷偷的看了一下知乎的实现,很显然是用一块白色背景覆盖的,加一点背景就露馅了
心想:知乎的前端也不怎么样? 可能别人的重点不在这些上面吧
下面列举几种更好的实现方式,不会露馅的那种
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; }
CSS分隔线 (伪元素+transform)
2.伪元素+flex
这个比较好理解了,设置display:flex,然后两个伪元素分别铺满剩余空间。
具体实现如下
html结构为
我是分割线
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结构为
我是分割线
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结构为
我是分割线