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

最新推荐文章于 2022-08-05 15:50:36 发布
最新推荐文章于 2022-08-05 15:50:36 发布
阅读量452 收藏 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实现分割线和气泡
宽高自适应+ 伪元素
weixin_30595035的博客
12-19 357
● 宽高自适应 ○ 网页布局中经常要定义元素的宽和高。但很多时候我们希望元素的大小能够根据窗口或子元素自动调整，这就是自适应。元素自适应在网页布局中非常重要，它能够使网页显示更灵活，可以适应在不同设备、不同窗口和不同分辨率下显示。 ○ 宽度自适应：元素宽度设置为100%。（块元素宽度默认为100%） ○ 高度自适应：元素高度设置为100%（前提给父元素设置高度） ...
CSS伪元素画分割线与其它实用方法（::before、::after）
I大俊
12-21 4578
CSS伪元素画分割线与其它实用方法（::before、::after）
利用伪元素实现元素居中
weixin_33859231的博客
01-06 601
效果： 代码： <div class="test"> <div class="testChild">ddddddddddddddddddddddddddddddddddddddddddd ddddddddddddddddddddddddddddddfffffffffffffffffffffffffffffffffffffff ...
CSS布局，居中，伪元素
qq_39298448的博客
03-09 664
一、 布局 单列布局 实现方式——定宽 + 水平居中。 双列布局 一列固定宽度，另外一列自适应宽度。 实现方式——浮动元素 + 普通元素 margin。 三列布局 两侧两列固定宽度，中间列自适应宽度。 <div id="content"> <!-- 注意为什么不是 main 在前面！ --> <div class="menu">aside</div> <div class="aside">aside</div> &l
使用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`来插入斜线。 在给定的...
伪元素居中方法
weixin_47065193的博客
08-06 668
伪元素居中方法 下面展示一些 内联代码片。 // A code block var foo = 'bar'; // An highlighted block left: 50%; transform: translateX(-50%);
10-css宽高自适应&伪元素
CapejasmineY的博客
08-05 1351
css宽高自适应方案、清浮动总结与拓展、伪元素的引入
伪元素在父元素中居中_如何借助伪元素实现垂直居中？
weixin_39793098的博客
11-21 1872
点击右上方红色按钮关注“小郑搞码事”，每天都能学到知识，搞懂一个问题！今天给大家讲一种实现垂直居中的方法：伪元素法(::before/::after)一、vertical-align实现了什么？先来看一下vertical-align实现了什么，在CSS中这个属性是垂直置中，指在元素中所有元素位置相互置中(中线对齐)，并不是相对于外框高度垂直居中。下面举个例子来看一下：样式文件DOM结构上面这段代码...
Html5-CSS之元素的五大居中方式
qq_38110274的博客
10-26 9256
Html5-CSS之五大居中方式 你是不是也对元素居中的知识点很是模糊？是不是苦于找不到一个总结的通俗易懂的说明？是不是自己懒得去总结？恭喜你，搜到这篇博客！ 这是鄙人在前端的学习与实践中总结出的元素的五大居中方式，黏贴了代码并对代码做了解释，希望对迷茫的有所帮助！ 下面的居中示例中，统一使用了同一个div作为父元素和p作为子元素 设置一个div,并且设置了div的宽高边框，div里面设置一个块元...
css设置元素继承父元素宽度_CSS：伪元素：之前和之后：从原始元素继承宽度/高度...
weixin_39674190的博客
12-22 1108
我使用CSS伪元素：before和：after在网站上为我的某些图像提供缩进效果。但是，没有指定宽度和高度，这些将不会显示。这将让我为每个图像指定一个固定的宽度和高度，我想这将适用于静态网页。CSS：伪元素：之前和之后：从原始元素继承宽度/高度但是，因为这些图像是使用jQuery动态生成的并且是用户提交的，所以图像的宽度和高度每次都不相同。现在我可能可以通过从图像中获取宽度并将其传递给：befor...
我不知道你知不知道我知道的伪元素小技巧
weixin_33795833的博客
11-06 89
伪元素 伪元素能做什么？我们要他有何用？它能为我们解决什么问题？和其他的方法相比她有什么有点？我们为什么要使用它？ 伪元素和伪类一样，添加到选择器，但是不是描述状态，他允许我们为元素某些部分设置样式；利用伪元素，我们可以简化页面的html标签，同时用起来也很方便，善于使用伪元素可以让你的页面更加地简洁优雅。之所以叫伪元素，是因为他修饰不在...
translateX 对width的影响
dearMengJJ的博客
07-15 1672
问题： 在使用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...
伪元素基础知识
m0_61123456的博客
11-05 1415
伪元素： 概念：指可以在HTML标签的开头或者结尾通过css来添加内容，该内容可以单独设置css 样式。 作用：能够实现一些页面效果，比如三角形 语法： 在标签开头添加内容 ::before{ content: '' } ::before是伪元素专用选择器，能够在标签开头添加内容，内容可以是图片或者文字或者空格。 特点： 通过伪元素添加的内容可以当做改标签的子元素，可以设置盒模型和宽高颜色之类的CSS属性。。 ‘content ...
css为什么要用浮动_12个HTML和CSS必须知道的重点难点问题
weixin_39638086的博客
11-20 225
这12个问题，基本上就是HTML和CSS基础中的重点难点了，也是必须要弄清楚的基本问题，其中定位的绝对定位和相对定位到底相对什么定位？这个还是容易被忽视的，浮动也是一个大坑，有很多细节。这12个知识点是我个人认为的，下面我们就来看看这12个知识点。1.怎么让一个不定宽高的 DIV，垂直水平居中?使用Flex只需要在父盒子设置：display: flex; justify-content: cent...
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、付费专栏及课程。

余额充值