伪元素before，after的简单了解

最新推荐文章于 2024-03-12 18:03:29 发布

天青色等烟雨

最新推荐文章于 2024-03-12 18:03:29 发布

阅读量904

点赞数 2

分类专栏：初入前端个人总结文章标签： css3 css html

本文链接：https://blog.csdn.net/weixin_63717396/article/details/121862172

版权

个人总结同时被 2 个专栏收录

29 篇文章 0 订阅

订阅专栏

初入前端

2 篇文章 0 订阅

订阅专栏

伪元素before，after的简单了解

1.before,after简介
- 2.content属性
- - - 3.与hover结合

1.before,after简介

两者都是以display:inline-block（横向块级排列）的属性存在，::before是在原本的元素之前加入内容，::after则是在原本的元素之后加入内容，同时伪元素也会继承原来元素的属性，就像如果原来文字是黑色，伪元素的文字也会是黑色。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div::before{
				content: "一段文字";
				
			}
		</style>
	</head>
	<body>
		<div style="color: #55FFFF;">
			
		</div>
	</body>
</html>

在这里插入图片描述

2.content属性

content属性中可以写一些东西，像文字，符号，当然也可以不写。
1）文字
如简介中的例子。
2）符号

<div>
			<q>我是一段文字我是一段文字我是一段文字</q>
		</div>

div::before{
				width: 200px;
				height: 200px;
				background-color: #87CEEB;
				content: open-quote;
			}
			div::after{
				content: close-quote;
			}
			q{
				quotes: '<''>';
			}

在这里插入图片描述

3.与hover结合

与hover结合后也会出现一些比较好看的效果。

.one{
			width: 500px;
			height: 200px;
			background-color: #7FFFD4;
			margin: 0 auto;
		}
			.one::after {
			  content: '';
			  position: absolute;
			   left: 0;
			   top: 0;
			   bottom: 0;
			   right: 0;
			   transition: .3s;
			   
			   background: #ffffff;
			   transform-origin: left;
			   transform: scaleX(0);
			 }
			
			 .one:hover::after {
			   transform: scaleX(1);
			 }