第十七讲：CSS伪元素 ::before 和 ::after
伪元素是CSS层面的概念，作为主选择器的附加选择器作用于HTML可视元素，是对HTML元素的补充或修饰。伪元素现已有十来多种，预计将来还会增加。本讲，我们仅学习两种做音画帖常用到的伪元素，::before 和 ::after。伪元素作为附加给主元素CSS选择器的特殊选择器，其语句表达结构离不开主元素CSS选择器，例如，假设我们有一个class选择器 .pbox1 { ... }，则 ::before 和 ::after 伪元素选择器分别写成 .pbox1::before { ... } 和 .pbox1::after { ... }。试看代码和效果：
<style>
.pbox1 {
width: 400px;
height: 100px;
border: 1px solid gray;
background: white;
}
.pbox1::before {
content: '我是 ::before';
background: tan;
}
.pbox1::after {
content: '我是 ::after';
background: teal;
}
</style>
<div class="pbox1"></div>
::before 和 ::after 伪元素的一个重要属性是 content，内容之意，可以给它赋文本值，用小角引号包裹起来。content属性不能缺失，它是两个伪元素是否生效的依托，因此，即便不想让伪元素显示任何内容，也需要它出现并给它赋空值。除了文本值，还可以使用 url() 函数给它一个图片地址，伪元素则将显示该图片的原始尺寸，此时，伪元素不能更改大小。::before 和 ::after伪元素其实本身就像是 class=".pbox1" HTML元素的子元素，除了特殊的content属性，还可以有用其他相应元素应有的属性，比如上面示例的 background 背景属性。
通常，拥有子元素的父元素，为了能约束子元素的布局，自身需要设置 position 属性，子元素则根据需要是否设置position属性。之前的讲义提到过，相对定位的父元素+绝对定位的子元素是我们做音画帖的配套设置，下面的示例所演示的是设置两个伪元素的位置和尺寸、形状等：
<style>
.pbox2 {
width: 400px;
height: 100px;
border: 1px solid gray;
background: white;
position: relative; /* 父元素相对定位 */
}
.pbox2::before {
content: '::before 伪元素';
position: absolute; /* 伪元素（子元素）绝对定位 */
background: tan;
width: 40%;
height: 80%;
}
.pbox2::after {
content: '::after伪元素';
position: absolute; /* 伪元素（子元素）绝对定位 */
background: teal;
width: 40%;
height: 100%;
right: 0;
}
</style>
<div class="pbox2"></div>
两个伪元素的代码有很多属性是一样的，我们可以把它们整合在一起，并依据CSS后面的设置覆盖前面的设置原理，不尽相同的也可以先整合在一块，然后在相应选择器再设置一次。上面示例的代码可以这样改写：
<style>
.pbox2 {
width: 400px;
height: 100px;
border: 1px solid gray;
background: white;
position: relative; /* 父元素相对定位 */
}
.pbox2::before, .pbox2::after {
content: '::before伪元素';
position: absolute; /* 伪元素（子元素）绝对定位 */
background: tan;
width: 40%;
height: 80%;
}
.pbox2::after {
content: '::after伪元素';
background: teal;
right: 0;
height: 100%;
}
</style>
<div class="pbox2"></div>
注意第9行代码的写法，两个伪元素合在一起写时用小角逗号隔开。改进的代码，9~15行其实是 ::before 的属性，::after 共用其中的一部分属性，然后再另开一个 ::after 选择器，将不同于 ::before 的属性另写一遍。是否需要如此改写代码并没有严格要求，完全根据各人喜好决定。
作为宿主元素的子元素，伪元素有自己默认的层级关系：::before 在最底层，::after 再最高层。如果宿主元素还有其他的子元素，我们来看看伪元素和其他的子元素各自的层级关系：
<style>
.pbox3 {
width: 400px;
height: 200px;
border: 1px solid gray;
background: white;
position: relative;
}
.pbox3::before {
content: '::before伪元素';
position: absolute;
background: tan;
width: 40%;
height: 80%;
}
.pbox3::after {
content: '::after伪元素';
position: absolute;
background: teal;
width: 40%;
height: 100%;
left: 120px;
}
.mpic {
position: absolute;
left: 50px;
width: 100px;
height: 100px;
}
</style>
<div class="pbox3">
<img class="mpic" src="https://638183.freep.cn/638183/web/svg/4yecc.svg" alt="" />
</div>
可以看到，::after伪元素处在最顶层。要改变层级关系，可以给需要提升层级的子元素如上例的图片class选择器（也可以是其他选择器，如id选择器）加上 z-index 属性，例如，z-index: 10; 即可确保图片不会被 ::after 遮挡。
::before 和 ::after 伪元素用途广泛，充分利用好它们可以有大作为。花潮格式的lrc歌词同步机制用到它们，本讲义的代码行号用到它们，一系列的音画帖也用到它们……，总之，这两个伪元素自身就是宿主元素的子元素，完全可以当做可视的元素看待和应用。以下例子，::before 充当播放器， ::after 用来加载一张图片：
<style>
/* 宿主元素类选择器 */
.pbox4 {
width: 800px;
height: 460px;
background: url('https://638183.freep.cn/638183/t22/hl/bjehp.webp') center/cover;
position: relative;
}
/* 伪元素公共属性 */
.pbox4::before, .pbox4::after {
content: '';
position: absolute;
}
/* 播放器按钮 ：使用::bofore伪元素背景图片 */
.pbox4::before {
right: 60px;
top: 160px;
width: 80px;
height: 80px;
background: url('https://638183.freep.cn/638183/web/svg/4yecc.svg') no-repeat center/cover;
}
/* 图片 ：使用::after content属性加载 */
.pbox4::after {
content: url('https://638183.freep.cn/638183/t22/hl/kite1.gif');
left: 20%;
mix-blend-mode: hue; /* 融合滤镜 ：修饰图片 */
}
</style>
<div class="pbox4"></div>
前面提到过，content属性如果使用 url() 函数加载图片，伪元素的宽高不能人为设置，一切依据图片的尺寸，但可以使用 transform: scale() 方法对之缩放，缩放后图片的元素位置以缩放前的大小为依据。
最后，需要注意的是，不是所有的HTML元素都支持伪元素。一般来说，自闭合标签如 img、input 等是不支持伪元素的，设置了伪元素也将无效。不能带子元素的HTML标签如audio、video等也不支持伪元素。伪元素一般用于 div、h*、p、span或以支持伪元素标签为蓝本的自定义标签等较为合适。此外，伪元素不会获得焦点，这意味着其上的文本、图片将不可能被选中，例如讲义代码的行号，你无法选择它们。
作业：模仿本讲最后一个示例做一个帖子布局，其中，① 伪元素 ::before 用来做帖子标题，字号 20px 或更大，有文本阴影；② ::after 伪元素使用 url() 函数加载一个合适尺寸的静态小图片模拟播放器并设计一个 @keyframes 关键帧动画去驱动播放器的旋转。
返回目录
发表于 2024-8-5 21:20
