一生二：CSS伪元素之before和after属性简析
<style type="text/css">.fDiv p { text-indent:2em; margin-bottom:10px; }
.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; }
.qDiv p::before { content: url('./img/21.gif'); }
.qDiv p::after { content: "——马黑黑语"; }
</style>
<div class="fDiv">
<p>web可视元素加载前后，可以用基于其自身的伪元素的before和after属性做相关修饰，比如我们想让<p>标签加载前加上一个小图标、加载后给个注释，我们可以按如下方式构造p的伪元素：</p>
<pre>.qDiv p::before{
content: url('图片地址');
}
.qDiv p::after {
content: "——马黑黑语";
}
</pre>
<p>这样，class属性为qDiv的盒子里，每一个p段落，开头都有一张图片，末尾都有类似于注释的标注。</p>
<p>这里要注意两点：其一，伪元素在CSS3表达为 标签名::属性名，如 p::before、p::after 等。其二，伪元素的样式表代码里，必须要有 content 属性和其相应值（不需要任何值时也要这样表达：content:""），否则伪元素样式表所做的设置不会起任何作用。</p>
<p>现在，我们来完成本文标题的命题目标：让一个div标签生出两个div来，亦即一个<div></div>能出现如下效果：</p>
<div class="mother"></div>
<p>CSS代码是这样：</p>
<pre>.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;
}
</pre>
<p>理解一下代码：原始框即母框mother设定为200×200的宽度，做了相对定位。其before和after伪元素也都设置相同的高宽尺寸，各自背景色不同，都做了绝对定位设置：before伪元素左移200个像素，after伪元素右移200个像素，不移动的话三个元素（一真二伪）会重叠在一起，默认会只看到before元素。</p>
<p>其实实现原理也很简单：mother加载前，before先加载，最后一个是after加载。默认时它们一家人会重叠在一起，所以通过CSS相关设定要把前后两个拉开，让它们母女仨展现仙女真容。</p>
<p>小结：::befor和::after能在原盒子基础上给出原盒子加载前和加载后的样式修饰，修饰方法必须依托于伪元素的content属性，即便没有任何要展现的内容；本文命题是一生二，实现方式是通过给伪元素在空content（内容）之后像设置真元素一样适当设定各类属性值，从而获得一个元素生出两个伪元素来的结果——相当于mother生出了两个漂漂亮亮的双胞胎。</p>
</div> 学习了。这before和after属性必须同时设置么，设置一个行不行？ <style type="text/css">
.hy { width: 120px; height:120px; position:relative; left:200px; background:olive; }
.hy::before { content:url('https://www.huachaowang.com/uc_server/data/avatar/000/00/71/30_avatar_middle.jpg'); width:120px; height:120px; position: absolute; left:-120px; }
.hy::after { content: "——马黑黑语"; width:120px; height:120px; position: absolute; left:120px; top:0px; background: red; }
</style>
<div class="hy"></div> 奇怪，为什么我在下面试验一下，怎么影响到主楼了，主楼我没动过啊{:5_102:} 我来修改一下文件名，估计是同一个帖子里文件名一样造成的 终于正常了，吓死我了，呵呵，我在楼下做试验竟然会影响到主楼，真没想到{:4_173:} <style type="text/css">
.hy1 { width: 120px; height:120px; position:relative; left:200px; background:Tan; }
.hy1::before { content:url('https://www.huachaowang.com/uc_server/data/avatar/000/00/71/30_avatar_middle.jpg'); width:120px; height:120px; position: absolute; left:-120px; }
.hy1::after { content: "——马黑黑语"; width:100px; height:20px; position: absolute; left:16px; top:50px; }
</style>
<div class="hy1"></div> 红影 发表于 2022-1-13 09:03
学习了。这before和after属性必须同时设置么，设置一个行不行？
都可以 红影 发表于 2022-1-13 09:23
终于正常了，吓死我了，呵呵，我在楼下做试验竟然会影响到主楼，真没想到
CSS样式设置同名的话会互相影响，会执行后面的 红影 发表于 2022-1-13 09:21
我来修改一下文件名，估计是同一个帖子里文件名一样造成的
悟性不错，知道问题所在 一楼小结那里的 before 漏打了一个字母 e 马黑黑 发表于 2022-1-13 12:25
都可以
哦哦，那用before或after，是不是也可以用挖洞图片盖住视频了。 马黑黑 发表于 2022-1-13 12:26
CSS样式设置同名的话会互相影响，会执行后面的
我复制的，想试试，没改名，差点闯祸{:4_173:} 马黑黑 发表于 2022-1-13 12:27
悟性不错，知道问题所在
谢谢谢谢，被吓了一跳。7楼的就是after没拉开距离，就跑到当中的上面去了。好玩。 红影 发表于 2022-1-13 16:55
谢谢谢谢，被吓了一跳。7楼的就是after没拉开距离，就跑到当中的上面去了。好玩。
对的，距离要拉开才行 红影 发表于 2022-1-13 16:54
我复制的，想试试，没改名，差点闯祸
其实我都用class类名，直接这样就行：
<div class="名称"></div>
不必重做CSS。当然，练习是要做的
红影 发表于 2022-1-13 16:53
哦哦，那用before或after，是不是也可以用挖洞图片盖住视频了。
理论上是可以的，这要自己去构思一个 马黑黑 发表于 2022-1-13 17:17
对的，距离要拉开才行
那个是我特别不拉开的，想看看效果。{:4_173:} 马黑黑 发表于 2022-1-13 17:19
其实我都用class类名，直接这样就行：
嗯嗯，动手练习一下更容易感觉到问题。 马黑黑 发表于 2022-1-13 17:19
理论上是可以的，这要自己去构思一个
又多了一个挖洞视频的玩法，真好。