css :before / :after 伪类选择器的真正作用及使用场景

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

cookcyq

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

阅读量5.2k

点赞数 7

本文链接：https://blog.csdn.net/cookcyq__/article/details/121845585

版权

CSS 同时被 2 个专栏收录

10 篇文章 0 订阅

订阅专栏

HTML

8 篇文章 0 订阅

订阅专栏

:before 和 :after 这两伪类选择器原本就是单纯的在元素前后增加额外的内容，比如：

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
		.box:before{
			content: '111';
		}
		.box:after{
			content: '222'
		}
	</style>
</head>
<body>
	<div class="box">测试</div>
</body>
</html>

在这里插入图片描述

看似很普通对吧，干啥呢这俩玩意，我直接手动写成111测试222不就完事了，大题小做呢。从上面例子上看确实显得这俩玩意等级很低，但它其实隐含着非常大的作用，那就是它能为我们节省标签，所以接下来我会举个例子简单说明一下

例子

在这里插入图片描述
代码：

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
		.box{
			position: relative;
		    width: 100px;
		    background: cyan;
		    text-align: center;
		}
	</style>
</head>
<body>
	<div class="box">测试</div>
</body>
</html>

如图所示，此时假设产品经理要求要在测试两字前后追加 < >左右箭头图标时，你会怎么做？没用过这俩伪类的人可能就会直接想着定义几个 div 去写 css 就完事了，这样确实可以实现，但有个明显的问题就是你的 html 结构就会额外多这些 div，并且会随着需求变更变得越来越多这些 div 标签，导致可读性变差。而有了 :before / :after 那可就省了好多事了，我们来看代码。

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
		.box{
			position: relative;
		    width: 100px;
		    background: cyan;
		    text-align: center;
		}
		.box:before, .box:after{
			content: '';
			position: absolute;
			width: 5px;
			height: 5px;
			top: 0; bottom: 0;margin: auto;
			border-width: 0 2px 2px 0;
			border-style: solid;
			color: red;
		}
		.box:before{
			left: 0;
			transform: rotate(135deg);
		}
		.box:after{
			right: 0;
			transform: rotate(-45deg);
		}
	</style>
</head>
<body>
	<div class="box">测试</div>
</body>
</html>

在这里插入图片描述
我们可以看到，图中多出了两个箭头，而代码中只有一个 div 标签，有没有感受到干净清晰？这才是 :before / :after 因有的功能，可不是简单的在前后追加内容，事实上只要你 css 玩的 6 ，这俩伪类就可以玩出许多新花样来，当然了，要想玩的6还是需要时间积累，这里笔者不再举例，我们只要记得这俩属性能够给我们 节省标签 就可以了。