一生二：CSS伪元素之before和after属性简析

马黑黑 · 发表于 2022-1-13 08:13

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

web可视元素加载前后，可以用基于其自身的伪元素的before和after属性做相关修饰，比如我们想让<p>标签加载前加上一个小图标、加载后给个注释，我们可以按如下方式构造p的伪元素：

.qDiv p::before{
	content: url('图片地址');
}

.qDiv p::after {
	content: "——马黑黑语";
}

这样，class属性为qDiv的盒子里，每一个p段落，开头都有一张图片，末尾都有类似于注释的标注。

这里要注意两点：其一，伪元素在CSS3表达为标签名::属性名，如 p::before、p::after 等。其二，伪元素的样式表代码里，必须要有 content 属性和其相应值（不需要任何值时也要这样表达：content:""），否则伪元素样式表所做的设置不会起任何作用。

现在，我们来完成本文标题的命题目标：让一个div标签生出两个div来，亦即一个<div></div>能出现如下效果：

CSS代码是这样：

.mother {
	width: 200px;
	height:200px;
	position:relative;
	left:200px;
	background:olive;
}

.mother::before {
	content: "";
	width:200px;
	height:200px;
	position: absolute;
	left:-200px;
	background: pink;
}

.mother::after {
	content: "";
	width:200px;
	height:200px;
	position: absolute;
	left:200px;
	background: red;
}

理解一下代码：原始框即母框mother设定为200×200的宽度，做了相对定位。其before和after伪元素也都设置相同的高宽尺寸，各自背景色不同，都做了绝对定位设置：before伪元素左移200个像素，after伪元素右移200个像素，不移动的话三个元素（一真二伪）会重叠在一起，默认会只看到before元素。

其实实现原理也很简单：mother加载前，before先加载，最后一个是after加载。默认时它们一家人会重叠在一起，所以通过CSS相关设定要把前后两个拉开，让它们母女仨展现仙女真容。

小结：::befor和::after能在原盒子基础上给出原盒子加载前和加载后的样式修饰，修饰方法必须依托于伪元素的content属性，即便没有任何要展现的内容；本文命题是一生二，实现方式是通过给伪元素在空content（内容）之后像设置真元素一样适当设定各类属性值，从而获得一个元素生出两个伪元素来的结果——相当于mother生出了两个漂漂亮亮的双胞胎。