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

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

2022-04-25 365
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 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
目录
相关文章
你都不懂
|
2月前
|
前端开发 JavaScript 容器
CSS 实战录: 双栏、四等分、不等间距、自适应...
CSS 实战录: 双栏、四等分、不等间距、自适应...
你都不懂
112 0
我是快乐的嘟嘟
|
1月前
|
前端开发 UED 容器
在 CSS 中使用 Flex 布局实现页面自适应时需要注意什么？
【10月更文挑战第22天】在使用 Flex 布局实现页面自适应时，需要对其基本原理和特性有深入的理解，同时结合具体的布局需求和场景，进行细致的调整和优化。通过合理的设置和注意事项的把握，才能实现理想的自适应效果，提升用户体验。还可以根据实际情况进行更深入的探索和实践，以不断提升 Flex 布局的应用能力。
我是快乐的嘟嘟
173 34
大树营养快线
|
1月前
|
缓存 监控 前端开发
CSS 提高性能的方法
【10月更文挑战第24天】在实际应用中，还需要根据具体项目的特点和需求，灵活选择和组合这些方法，不断进行优化和改进。同时，随着技术的不断发展，也需要持续关注新的性能优化技巧和最佳实践，以保持在性能优化方面的领先地位。你对 CSS 性能优化还有哪些深入的思考和经验呢？欢迎进一步交流和分享。
大树营养快线
40 5
我是快乐的嘟嘟
|
1月前
|
前端开发
css页面顶部底部固定，中间自适应几种方法
【10月更文挑战第22天】css页面顶部底部固定，中间自适应几种方法
我是快乐的嘟嘟
166 1
Li370234940
|
2月前
|
前端开发 容器
CSS 中几种常用的换行方法
CSS 中几种常用的换行方法
Li370234940
35 1
听白
|
3月前
|
XML 前端开发 JavaScript
jQuery HTML / CSS 方法
jQuery HTML / CSS 方法
听白
21 2
听白
|
3月前
|
前端开发 JavaScript
jQuery css() 方法
jQuery css() 方法
听白
25 3
神明木佑
|
2月前
|
前端开发 UED
css性能优化的方法
css性能优化的方法
神明木佑
32 0
派大鑫的工作室
|
2月前
|
前端开发
CSS绘制三角形的方法
CSS绘制三角形的方法
派大鑫的工作室
30 0
听白
|
3月前
|
前端开发 JavaScript
jQuery css() 方法
jQuery css() 方法
听白
26 1

热门文章

最新文章

  • 1
    如何利用HTML和CSS构建企业级网站的全过程。从项目概述到页面结构设计，再到HTML结构搭建与CSS样式设计，最后实现具体页面并进行优化提升，全面覆盖了网站开发的关键步骤
  • 2
    CSS滚动效果和视差滚动的原理、应用及其对用户体验的影响。从平滑滚动到元素跟随，再到滚动触发动画
  • 3
    jQuery和CSS3滑动展开菜单按钮插件
  • 4
    探讨了CSS媒体查询在移动端开发中的应用，介绍了媒体查询的基本概念、常见条件及其在响应式布局、导航菜单、图片优化和字体调整等方面的具体应用
  • 5
    高效的 HTML 与 CSS 编写技巧，涵盖语义化标签、文档结构优化、CSS 预处理、模块化设计、选择器优化、CSS 变量、媒体查询等内容
  • 6
    页面滚动触发css3动画js插件
  • 7
    HTML与CSS在Web组件化中的核心作用及前端技术趋势
  • 8
    纸屑飘落生日蛋糕场景js+css3动画特效
  • 9
    纯CSS3+SVG实现的节日庆祝五彩纸屑动画效果源码
  • 10
    在数字化时代，Web 应用性能优化尤为重要。本文探讨了CSS与HTML在提升Web性能中的关键作用及未来趋势
  • 1
    css结构伪类
    66
  • 2
    web前端之纯CSS实现简单酷炫的照片墙效果、排除元素的伪类、scale
    94
  • 3
    【Web前端】CSS基本语法规范和引入方式&&常见选择器用法&&常见元素属性
    59
  • 4
    HTML5/CSS3粒子效果进度条代码
    75
  • 5
    同样都是将物理设备虚拟化，思科的VSS和华为的CSS到底有啥区别？
    143
  • 6
    CSS 超出内容... 或者多行省略及两端对齐及超出多行居中显示
    61
  • 7
    CSS外边距重叠：原理、结果
    56
  • 8
    css 中可以让文字在垂直和水平方向上重叠的两个属性是什么？
    67
  • 9
    CSS常见用法 以及JS基础语法
    70
  • 10
    css设置内嵌样式阴影
    77

    • 相关课程

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

    • 相关电子书

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

    • 相关实验场景

    更多
  • 前端开发基础3：CSS3常见显示属性
  • CSS基础教程
    • 下一篇
    手把手教你白嫖阿里云服务器(免费领服务器)