CSS3伪元素

最新推荐文章于 2024-04-17 10:43:16 发布

七晓

最新推荐文章于 2024-04-17 10:43:16 发布

阅读量232

点赞数

分类专栏：学习总结文章标签： css css3

本文链接：https://blog.csdn.net/SpringCloudTest/article/details/108296713

版权

学习总结专栏收录该内容

9 篇文章 0 订阅

订阅专栏

1.伪元素选择器

伪元素选择器可以帮助我们利用CSS创建新标签元素，而不需要HTML标签，从而简化HTNL结构。
比如一些应用场景中需要在内容前面加上盒子或者是在内容后面加上盒子的时候，这种时候就可以使用伪元素的方式来替代。
使用方式：
::before -------------- 在元素内部的前面插入内容
::after------------------ 在元素内部的后面插入内容
注意！！！
1.before和afgter创建一个元素，但是属于行内元素
2.新创建的这个元素在文档树中是找不到的，所以我们称之为伪元素
3.语法: element::before {}
4.before和after必须有content属性
5.before在父元素内容的前面创建元素，after在父元素的后面插入元素
6.伪元素选择器和标签选择器一样，权重为1
before 和after两种伪元素分别在元素内容的前面和后面，如上图所示
代码演示使用方法

<style>
     div {
		width: 200px;
		height: 200px;
		background: pink;
	}
	div::before {
		content: '伪元素前面'
	}
	div: after {
		content: '伪元素后面'
	}
</style>
<body>
	<div>是</div>
</body>

2.伪元素的使用场景

2.1伪元素配合字体图标使用

在这里插入图片描述
要实现如上图所示的效果就可以使用到伪元素的方式了
伪元素借助于字体图标可以实现上图所示的样式

div {
			position: relative;
			width: 200px;
			height: 35px;
			border: 1px solid red;
		}
		div::after {
			position: absolute;
			top: 10px;
			right: 10px;
			font-family: 'icomoon';
			content: '';
			color: red;
			font-size: 18px;
		}
<div></div>

2.2 伪元素实现阴影遮罩效果

在这里插入图片描述要实现上图，鼠标移动上去有阴影遮罩的效果

div:: before {
			/* 隐藏遮罩层 */
			display: none;
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background: rgba(0,0,0,.4) url(images/arr.png) no-repeat center center;
		}
     	div:hover ::before {
			display: block;
		}
		<div class="tudou">
			<img src="images/tudou.jpg"/>
		</div>

2.3 伪元素清除浮动

	.clearfix:before,.clearfix:after {
		content: '',
		display: table	
	}
	.clearfix:after {
		clear: both
	}

伪元素清除浮动实际上是额外标签法的升级版本。在元素的前后都加上一个伪元素的盒子，display:table指的是盒子的块级元素且在一行上显示。

七晓

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录