AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

CSS实现自适应分隔线的N种方法

2022-04-25 357
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： CSS实现自适应分隔线的N种方法

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

image.png

这里的自适应是指两边的横线会随着文字的个数和父级的宽度自适应


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

image.png

心想：知乎的前端也不怎么样？ 可能别人的重点不在这些上面吧


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


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与其他语言所不同的吧~


这里整理了一下，整体效果如下，可访问这里点击预览查看，大家在实际项目中可自行选取所需要的方式


image.png


可能还有其他方式没有想到，欢迎大家集思广益，在下方留言讨论

文章标签：
前端开发
关键词：
CSS方法
CSS自适应
CSS自适应方法
CSS分隔线
CSS实现
游客y3drc72yycbqm
目录
相关文章
你都不懂
|
1月前
|
前端开发 JavaScript 容器
CSS 实战录: 双栏、四等分、不等间距、自适应...
CSS 实战录: 双栏、四等分、不等间距、自适应...
你都不懂
80 0
我是快乐的嘟嘟
|
20天前
|
前端开发 UED 容器
在 CSS 中使用 Flex 布局实现页面自适应时需要注意什么？
【10月更文挑战第22天】在使用 Flex 布局实现页面自适应时，需要对其基本原理和特性有深入的理解，同时结合具体的布局需求和场景，进行细致的调整和优化。通过合理的设置和注意事项的把握，才能实现理想的自适应效果，提升用户体验。还可以根据实际情况进行更深入的探索和实践，以不断提升 Flex 布局的应用能力。
我是快乐的嘟嘟
92 34
大树营养快线
|
17天前
|
缓存 监控 前端开发
CSS 提高性能的方法
【10月更文挑战第24天】在实际应用中，还需要根据具体项目的特点和需求，灵活选择和组合这些方法，不断进行优化和改进。同时，随着技术的不断发展，也需要持续关注新的性能优化技巧和最佳实践，以保持在性能优化方面的领先地位。你对 CSS 性能优化还有哪些深入的思考和经验呢？欢迎进一步交流和分享。
大树营养快线
28 5
我是快乐的嘟嘟
|
20天前
|
前端开发
css页面顶部底部固定，中间自适应几种方法
【10月更文挑战第22天】css页面顶部底部固定，中间自适应几种方法
我是快乐的嘟嘟
18 1
Li370234940
|
1月前
|
前端开发 容器
CSS 中几种常用的换行方法
CSS 中几种常用的换行方法
Li370234940
25 1
听白
|
2月前
|
XML 前端开发 JavaScript
jQuery HTML / CSS 方法
jQuery HTML / CSS 方法
听白
15 2
听白
|
2月前
|
前端开发 JavaScript
jQuery css() 方法
jQuery css() 方法
听白
20 3
神明木佑
|
1月前
|
前端开发 UED
css性能优化的方法
css性能优化的方法
神明木佑
22 0
派大鑫的工作室
|
1月前
|
前端开发
CSS绘制三角形的方法
CSS绘制三角形的方法
派大鑫的工作室
22 0
听白
|
2月前
|
前端开发 JavaScript
jQuery css() 方法
jQuery css() 方法
听白
14 1

热门文章

最新文章

  • 1
    CSS3实现多样的边框效果
  • 2
    Css基本样式————字体
  • 3
    CSS3-实现单选框radio的小动画
  • 4
    使用 CSS3 实现 3D 图片滑块效果【附源码下载】
  • 5
    纯CSS3实现宽屏二级下拉菜单
  • 6
    CSS3实现时间轴效果
  • 7
    05.javascript访问CSS
  • 8
    【HTML+CSS+JS】前端三剑客实现3D旋转照片墙
  • 9
    CSS伪元素实现的3D按钮
  • 10
    CSS3中的选择器
  • 1
    使用CSS中的cursor属性值，常用的可设置参数，以及其他16中参数值的使用场景和示例代码
    65
  • 2
    技术心得：xpath、CSS定位方法
    43
  • 3
    【UI】 elementui的dialog弹窗打开时CSS的BUG | 滚动条消失bug
    155
  • 4
    CSS【详解】对齐 （含文本垂直对齐，文本水平对齐、单行文本垂直居中、多行文本垂直居中、6 种方案块级元素水平垂直居中 、7 种方案图片水平垂直居中、文本自适应对齐、图标和文本对齐，图片和文本对齐等）
    69
  • 5
    CSS【详解】布局 display （ 含 flex 布局，grid 布局，table 布局，float 布局，响应式布局 等）
    140
  • 6
    CSS【详解】定位 position （静态定位 static -- 文档流排布 、相对定位 relative、绝对定位 absolute、固定定位 fixed、黏性定位 sticky）
    49
  • 7
    CSS【详解】长度单位 （ px，%，em，rem，vw，vh，vmin，vmax，ex，ch ）
    69
  • 8
    CSS 【详解】样式选择器（含ID、类、标签、通配、属性、伪类、伪元素、Content属性、子代、后代、兄弟、相邻兄弟、交集、并集等选择器）
    151
  • 9
    使用HTML和CSS创建响应式表格
    163
  • 10
    常见的css优化方案都有那些
    49

    • 相关课程

    更多
  • CSS 快速掌握
  • 零基础学前端HTML+CSS
  • 前端开发CSS基础

    • 相关电子书

    更多
  • 零基础CSS入门教程
  • 低代码开发师（初级）实战教程
  • 阿里巴巴DevOps 最佳实践手册

    • 相关实验场景

    更多
  • 前端开发基础3：CSS3常见显示属性
  • CSS基础教程
    • 下一篇
    阿里云OSS设置跨域访问