伪元素在父元素中居中_css使用伪元素实现自适应宽度的-分割线

最新推荐文章于 2022-08-05 15:50:36 发布
最新推荐文章于 2022-08-05 15:50:36 发布
阅读量451 收藏 1
点赞数
文章标签： 伪元素在父元素中居中

322dfa6db8c87032533de396cf6950d0.png

第一种：使用伪元素+transform:translateX(-100%);

原理是设置文本居中，给定两个伪元素，分别绝对定位，那么此时伪元素也是跟随着水平居中的，设置的宽度，然后把左边的往左位移100%就可以了，父元素超出设置隐藏。

自由伸缩效果为：

08e2b27227fc301b4775f7271269f6d0.png
移动端

4506c5f486ec9d389e4ecb0e7b8751ae.png
平板

881b87ca6c0e8bc2adb6c9ff7413ff6e.png
pc端

具体实现如下html为

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>分割线</title>
		<style>
			.cutting_line{
			    position: relative;
			    text-align: center;
			    overflow: hidden;
			    font-size: 14px;
			    color: black;
			}
			.cutting_line::before{
				content: '';
				display: inline-block;
				width: 100%;
				height: 2px;
				position: absolute;
				background: black;
				top: 50%;
			}
			.cutting_line::after{
			    content: '';
			    display: inline-block;
			    width: 100%;
			    height: 2px;
			    position: absolute;
			    background: black;
			    top: 50%;
			}
			.cutting_line::before{
			    margin-left: -10px;
			    transform: translateX(-100%);
			}
			.cutting_line::after{
			    margin-left: 10px;
			}
		</style>
	</head>
	<body>
		<div class="cutting_line">分割线</div>
	</body>
</html>

第二种：伪元素+flex

设置display:flex，然后两个伪元素分别铺满剩下的空间

自由伸缩效果为：

08e2b27227fc301b4775f7271269f6d0.png
移动端

4506c5f486ec9d389e4ecb0e7b8751ae.png
平板

881b87ca6c0e8bc2adb6c9ff7413ff6e.png
pc端

具体实现如下html为

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>分割线</title>
		<style>
			.cutting_line{
			    display: flex;
			    align-items: center;
			    font-size: 14px;
			    color: balck;
			}
			.cutting_line::before,.cutting_line::after{
			    content: '';
			    flex: 1;
			    height: 2px;
			    background: black;
			}
			.cutting_line::before{
			    margin-right: 10px;
			}
			.cutting_line::after{
			    margin-left: 10px;
			}
			
		</style>
	</head>
	<body>
		<div class="cutting_line">分割线</div>
	</body>
</html>

第三种：伪元素+box-shadow/outline+clip-path

利用文本和伪元素居中，然后生成足够大的box-shadow或者outline，由于不支持单个方向，所以用clip-path或者clip裁剪掉

自由伸缩效果为：

08e2b27227fc301b4775f7271269f6d0.png
移动端

4506c5f486ec9d389e4ecb0e7b8751ae.png
平板

881b87ca6c0e8bc2adb6c9ff7413ff6e.png
pc端

具体实现如下html为

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>分割线</title>
		<style>
			.cutting_line{
			    text-align: center;
			    font-size: 14px;
			    color: black;
			    overflow: hidden;
			}
			.cutting_line::before,.cutting_line::after{
			    content: '';
			    display: inline-block;
			    width: 0;
			    height: 2px;
			    box-shadow: 0 0 0 9999px black;
			    vertical-align: middle;
			}
			.cutting_line::before{
			    margin-right: 10px;
			    clip-path: polygon(0 0, -9999px 0, -9999px 100%, 0 100%);
			}
			.cutting_line::after{
			    margin-left: 10px;
			    clip-path: polygon(0 0, 9999px 0, 9999px 100%, 0 100%);
			}
			
			
		</style>
	</head>
	<body>
		<div class="cutting_line">分割线</div>
	</body>
</html>

第四种：伪元素+right

伪元素+right:100%这个实现需要多一层标签，外部仍然是text-align: center，内部文本里添加两个伪元素绝对定位，其中左边的设置距离右边100%

自由伸缩效果为：

08e2b27227fc301b4775f7271269f6d0.png
移动端

4506c5f486ec9d389e4ecb0e7b8751ae.png
平板

881b87ca6c0e8bc2adb6c9ff7413ff6e.png
pc端

具体实现如下html为

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>分割线</title>
		<style>
			.cutting_line{
			    text-align: center;
			    font-size: 14px;
			    color: black;
			    overflow: hidden;
			}
			.inner{
			    position: relative;
			}
			.inner::before,.inner::after{
			    position: absolute;
			    content: '';
			    width: 9999px;
			    height: 2px;
			    background: black;
			    top: 50%;
			}
			.inner::before{
			    right: 100%;
			    margin-right: 10px;
			}
			.inner::after{
			    margin-left: 10px;
			}
			
		</style>
	</head>
	<body>
		<div class="cutting_line">
		    <span class="inner">分割线</span>
		</div>
	</body>
</html>

第五种：border+transform

这个可以不用到伪元素，给内部文本左右足够大的2px边框，此时需要设置line-height:2px，由于内部整体以及足够大了（超过父元素），可以使用绝对定位和transform: translateX(-50%)居中

自由伸缩效果为：

08e2b27227fc301b4775f7271269f6d0.png
移动端

4506c5f486ec9d389e4ecb0e7b8751ae.png
平板

881b87ca6c0e8bc2adb6c9ff7413ff6e.png
pc端

具体实现如下html为

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>分割线</title>
		<style>
			.cutting_line{
			    position: relative;
			    text-align: center;
			    font-size: 14px;
			    color: black;
			    overflow: hidden;
			    padding: .6em 0;/**把高度撑起来**/
			}
			.inner{
			    position: absolute;
			    left: 50%;
			    transform: translateX(-50%);
			    white-space: nowrap;
			    line-height: 2px;
			    border-left: 9999px solid black;
			    border-right: 9999px solid black;
			    padding: 0 10px;
			}
			
		</style>
	</head>
	<body>
		<div class="cutting_line">
			 <span class="inner">分割线</span>
		</div>
	</body>
</html>

第六种：fieldset和legend标签组合

自由伸缩效果为：

08e2b27227fc301b4775f7271269f6d0.png
移动端

4506c5f486ec9d389e4ecb0e7b8751ae.png
平板

881b87ca6c0e8bc2adb6c9ff7413ff6e.png
pc端

具体实现如下html为

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>分割线</title>
		<style>
			.cutting_line{
			    font-size: 14px;
			    color: black;
			    border: 0;
			    border-top: 2px solid black;
			    padding: 0;
			}
			.inner{
			    margin: 0 auto;;
			    padding: 0 10px;
			}
			
		</style>
	</head>
	<body>
		<fieldset class="cutting_line">
		    <legend class="inner">分割线</legend>
		</fieldset>
	</body>
</html>
weixin_39621235
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
[CSS] 用伪元素:after实现分割线和气泡
05-31
用伪元素:after实现分割线和气泡
CSS布局，居中，伪元素
qq_39298448的博客
03-09 657
一、 布局 单列布局 实现方式——定宽 + 水平居中。 双列布局 一列固定宽度，另外一列自适应宽度。 实现方式——浮动元素 + 普通元素 margin。 三列布局 两侧两列固定宽度，中间列自适应宽度。 <div id="content"> <!-- 注意为什么不是 main 在前面！ --> <div class="menu">aside</div> <div class="aside">aside</div> &l
css - 变形位移 translate的使用
m0_64000192的博客
07-31 1419
css-translate的使用
伪元素居中方法
weixin_47065193的博客
08-06 666
伪元素居中方法 下面展示一些 内联代码片。 // A code block var foo = 'bar'; // An highlighted block left: 50%; transform: translateX(-50%);
transform: translateY(-100%)偏移实现上滑隐藏导航栏
热门推荐
魏少
07-03 2万+
transform:translateY(100%) 语法： Transform字面上就是变形，改变的意思。在CSS3中transform主要包括以下几种：旋转rotate、扭曲skew、缩放scale和移动translate以及矩阵变形matrix。下面我们一起来看看CSS3中transform的旋转rotate、扭曲skew、缩放scale和移动translate具体如何实现，老样子，我们就从transform的语法开始吧。 语法： transform ： none ; 也就是： tran...
使用CSS伪元素实现文字部分变色的方法
09-25
接着，使用`:before`伪元素来插入内容的前半部分，设置其`position: absolute`以便相对于父元素定位，`left: 0`和`top: 0`使其位于元素的左上角。通过`content: attr(data-content)`动态获取HTML元素的`data-content...
CSS中的几个伪元素使用介绍
09-25
在CSS中，伪元素是一种非常实用的特性，用于在元素的内容之外添加或修饰内容，而无需在HTML中实际增加额外的元素。今天我们将探讨几个常见的CSS伪元素，以及如何在实际项目中应用它们。 首先，我们要了解两个主要的...
CSS中:before和:after伪元素使用的奇技淫巧
09-24
:before和:after伪元素在CSS中除了被用来添加元素、加小标、清浮动等,还有很多妙用之处,接下来我们就来看一两个CSS中:before和:after伪元素使用的奇技淫巧
CSS利用伪元素实现导航栏斜线分隔
09-24
伪元素是CSS中用于选择文档中的特定部分，但这些部分并不是实际的DOM元素。常见的伪元素有`:before`和`:after`，它们分别在元素内容之前或之后插入内容。在这个场景下，我们将使用`:before`来插入斜线。 在给定的...
CSS3 2D转换
abraham_ly的博客
12-13 265
CSS3 2D转换 1、CSS3 转换 ​ 转换(transform)是CSS3中具有颠覆性的特征之一，可以实现元素的位移、旋转、变形、缩放……等。 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YMNa30Zh-1607857748232)(E:\前端\H5+CSS3\笔记\transforms.gif)] 2、工作原理 ​ 转换的效果是让某个元素改变形状、大小、位置……等，可以使用2D或3D转换来转换我们的元素。 3、2D 转换 2D 转换是改变元素在二维平面上位置
css为什么要用浮动_12个HTML和CSS必须知道的重点难点问题
weixin_39638086的博客
11-20 224
这12个问题，基本上就是HTML和CSS基础中的重点难点了，也是必须要弄清楚的基本问题，其中定位的绝对定位和相对定位到底相对什么定位？这个还是容易被忽视的，浮动也是一个大坑，有很多细节。这12个知识点是我个人认为的，下面我们就来看看这12个知识点。1.怎么让一个不定宽高的 DIV，垂直水平居中?使用Flex只需要在父盒子设置：display: flex; justify-content: cent...
2022/03/08面试问题
Benxiaohai_311的博客
03-08 185
前端面试要点
Absolute 盘点8种CSS实现垂直居中水平居中的绝对定位居中技术
luckychen81的博客
05-14 3867
Ⅰ.绝对定位居中(Absolute Centering)技术 我们经常用margin:0 auto来实现水平居中，而一直认为margin:auto不能实现垂直居中……实际上，实现垂直居中仅需要声明元素高度和下面的CSS: .Absolute-Center { margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; } 我不是这种实现方法的第一人，可能这只是非常常见的一种小技术，我斗胆将其
translateX 对width的影响
dearMengJJ的博客
07-15 1669
问题： 在使用translatex使元素居中对齐时： .price-box .price-count{ left: 50%; top: -24rpx;transform: translateX(-50%);height:32rpx;line-height:32rpx;padding:0 8rpx;border-radius:2rpx;color:#fff;background: -webkit-l...
10-css宽高自适应&伪元素
CapejasmineY的博客
08-05 1334
css宽高自适应方案、清浮动总结与拓展、伪元素的引入
宽高自适应+ 伪元素
weixin_30595035的博客
12-19 357
● 宽高自适应 ○ 网页布局中经常要定义元素的宽和高。但很多时候我们希望元素的大小能够根据窗口或子元素自动调整，这就是自适应。元素自适应在网页布局中非常重要，它能够使网页显示更灵活，可以适应在不同设备、不同窗口和不同分辨率下显示。 ○ 宽度自适应：元素宽度设置为100%。（块元素宽度默认为100%） ○ 高度自适应：元素高度设置为100%（前提给父元素设置高度） ...
css设置元素继承父元素宽度_CSS：伪元素：之前和之后：从原始元素继承宽度/高度...
weixin_39674190的博客
12-22 1104
我使用CSS伪元素：before和：after在网站上为我的某些图像提供缩进效果。但是，没有指定宽度和高度，这些将不会显示。这将让我为每个图像指定一个固定的宽度和高度，我想这将适用于静态网页。CSS：伪元素：之前和之后：从原始元素继承宽度/高度但是，因为这些图像是使用jQuery动态生成的并且是用户提交的，所以图像的宽度和高度每次都不相同。现在我可能可以通过从图像中获取宽度并将其传递给：befor...
伪元素在父元素中居中_如何借助伪元素实现垂直居中？
weixin_39793098的博客
11-21 1867
点击右上方红色按钮关注“小郑搞码事”，每天都能学到知识，搞懂一个问题！今天给大家讲一种实现垂直居中的方法：伪元素法(::before/::after)一、vertical-align实现了什么？先来看一下vertical-align实现了什么，在CSS中这个属性是垂直置中，指在元素中所有元素位置相互置中(中线对齐)，并不是相对于外框高度垂直居中。下面举个例子来看一下：样式文件DOM结构上面这段代码...
css中如何用伪类元素实现横向分割线
最新发布
05-26
在 CSS 中，可以使用 ::before 或 ::after 伪元素来实现横向分割线。以下是一个简单的示例代码： ```css .line { position: relative; border-top: 1px solid #ccc; margin-top: 20px; padding-top: 20px; } ....

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值