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)

<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

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:;
height: 1px;
background: #ccc;
}
.title::before{
margin-right: 10px;
}
.title::after{
margin-left: 10px;
}

点击查看效果 CSS分隔线 (伪元素+flex)

<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

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:;
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)

<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

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%)

<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

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)

<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

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)

<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

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)

<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

8.fieldset+legend

利用fieldsetlegend标签组合,可以天然实现分隔线效果,参考至张鑫旭的这篇文章

具体实现如下

html结构为

<fieldset class="title">
<legend class="inner">我是分割线</legend>
</fieldset>

css样式为

.title{
font-size: 14px;
color: #999;
border:;
border-top: 1px solid #ccc;
padding:;
}
.inner{
margin: 0 auto;;
padding: 0 10px;
}

点击查看效果 CSS分隔线 (fieldset+legend)

<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

转自:https://www.cnblogs.com/zml1023/p/12083153.html

【转】CSS实现自适应分隔线的N种方法的更多相关文章

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

    分割线是网页中比较常见的一类设计了,比如说知乎的更多回答 这里的自适应是指两边的横线会随着文字的个数和父级的宽度自适应 偷偷的看了一下知乎的实现,很显然是用一块白色背景覆盖的,加一点背景就露馅了 心想 ...

  2. CSS巧妙实现分隔线的几种方法

    单个标签实现分隔线: 点此查看实例展示 .demo_line_01{ padding: 0 20px 0; margin: 20px 0; line-height: 1px; border-left: ...

  3. 文字在线中间,CSS巧妙实现分隔线的几种方法

    单个标签实现分隔线: .demo_line_01{ padding: 0 20px 0; margin: 20px 0; line-height: 1px; border-left: 200px so ...

  4. CSS实现导航条Tab的三种方法

    前面的话   导航条Tab在页面中非常常见,本文说详细介绍CSS实现导航条Tab的三种方法 布局   根据上图所示,先规定几个定义,上图的模块整体叫做导航,由导航标题和导航内容组成.要实现上图所示的布 ...

  5. CSS + ul li 横向排列的两种方法

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. css巧妙实现分隔线

    单个标签实现分隔线 .demo_line_01{ padding: 0 20px 0; margin: 20px 0; line-height: 1px; border-left: 200px sol ...

  7. css+div制作圆角矩形的四种方法

    圆角矩形一向是设计师最倾心的一种设计,因为他们可以让整个网页生动起来,不那么死板,所以,作为一个优秀的网页设计师,学会一种或多种编辑圆角矩形的方法是必不可少的,而且圆角矩形应用范围极广,一个网页内的所 ...

  8. ios webview自适应实际内容高度4种方法

    有的时候会碰见类似的苦逼需求, webview自适应实际内容高度 下面有四种方法供使用 方法1:获取webview中scrovllview的contentsize进行设置   1 2 3 4 5 6 ...

  9. CSS中设置DIV垂直居中的N种方法 兼容IE浏览器

    在说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?即使是某些浏览器不支持我只需做少许的CSS Hack技术就可以啊!所以在这里我还要啰嗦两句,CSS中 ...

随机推荐

  1. jQuery新的事件绑定机制on()示例应用

    投稿:whsnow 字体:[增加 减小] 类型:转载   从jQuery1.7开始,jQuery引入了全新的事件绑定机制,on()和off()两个函数统一处理事件绑定,下面通过示例为大家介绍下     ...

  2. PCHMI工控组态开发视频教程

    PCHMI是一款适合所有PLC工程师快速上手工控组态开发的控件 下面是视频教程链接 PCHMI工控组态 02-按钮的使用 PCHMI工控组态 03-数据显示器使用 PCHMI工控组态 04-标签控件的 ...

  3. RTL8711AM

    官方文档主要修改 为了实现log服务 1,在log_service.h 取消注释 #ifndef LOG_SERVICE_H #define LOG_SERVICE_H #include " ...

  4. 智能充电安全管理首选SOC单芯片方案:SI24R2F

    SI24R2F简介:       SI24R2F是一颗工作在2.45GHZ ISM 频段,专为低功耗有源RFID应用场合设计,集成崁入式2.45GHZ 无线射频发射器模块.64次可编程NVM存储器模块 ...

  5. 和为S的连续正整数序列(双指针法)

    题目描述 小明很喜欢数学,有一天他在做数学作业时,要求计算出9~16的和,他马上就写出了正确答案是100.但是他并不满足于此,他在想究竟有多少种连续的正数序列的和为100(至少包括两个数).没多久,他 ...

  6. DCGAN增强图片数据集

    DCGAN增强图片数据集 1.Dependencies Python 3.6+ PyTorch 0.4.0 numpy 1.14.1, matplotlib 2.2.2, scipy 1.1.0 im ...

  7. Java If ... Else

    章节 Java 基础 Java 简介 Java 环境搭建 Java 基本语法 Java 注释 Java 变量 Java 数据类型 Java 字符串 Java 类型转换 Java 运算符 Java 字符 ...

  8. Acwing200 Hankson的趣味题

    原题面:https://www.acwing.com/problem/content/202/ 题目大意:gcd(x,a0)=a1,lcm(x,b0)=b1,问你有多少满足条件的正整数x. 输入描述: ...

  9. Codeforces 448C:Painting Fence 刷栅栏 超级好玩的一道题目

    C. Painting Fence time limit per test 1 second memory limit per test 512 megabytes input standard in ...

  10. Java8 Stream分组

    //根据排课id分组 Map<Integer, List<Schedule4Homework>> idSchedule4HomeworksMap = schedule4Home ...