在微信小程序中，CSS 选择器 ::after 和 ::before 用于在元素内容前或后插入额外的内容。它们属于 CSS 的伪元素（pseudo-elements），可以用来增加装饰效果或者在内容之前/之后插入一些视觉效果。
基本语法
::before：在元素内容之前插入内容。
::after：在元素内容之后插入内容。
这两个伪元素都可以用于添加额外的内容，并且可以通过 content 属性定义要插入的内容。
假设我们有一个简单的微信小程序页面，我们希望在每个标题前面添加一个图标，在每个段落后面添加一个小图标。我们可以通过 ::before 和 ::after 实现这个效果。
WXML 部分
这是一个标题
这是一些内容。
WXSS
/* pages/index/index.wxss */
.container {
padding: 20px;
}
.title {
font-size: 24px;
font-weight: bold;
position: relative; /* 使伪元素的绝对定位基于这个元素 */
}
.title::before {
content: ""; /* 插入的图标内容 */
position: absolute; /* 绝对定位 */
left: -30px; /* 图标距离标题的距离 */
top: 0;
font-size: 24px;
}
.content {
font-size: 16px;
margin-top: 10px;
position: relative;
}
.content::after {
content: ""; /* 插入的图标内容 */
position: absolute;
right: -30px; /* 图标距离内容的距离 */
top: 0;
font-size: 16px;
}
解释
position: relative：在 .title 和 .content 上设置 position: relative 以便于伪元素使用绝对定位 (position: absolute) 时能以其为参照点。
.title::before：在 .title 元素内容之前插入一个星星图标。使用 position: absolute 定位，left 和 top 用于调整图标的位置。
.content::after：在 .content 元素内容之后插入一个链接图标。同样使用 position: absolute 定位，right 和 top 用于调整图标的位置。
适用场景
装饰性内容：在元素前后插入装饰性的内容，比如图标、标记、装饰线条等。
引导用户：用于指示或引导用户注意某些部分，比如使用箭头或标记来吸引注意。
内容补充：在内容之前或之后添加附加信息，比如“更多”按钮、标记等。
注意事项
伪元素的 content 属性：必须设置 content 属性，否则伪元素不会显示。即使是空内容 (content: "") 也要设置，以确保伪元素被创建。
绝对定位：伪元素的绝对定位依赖于父元素的 position: relative，否则伪元素可能不会正确显示。
