微信小程序 CSS 选择器::after和::before的简单使用

在微信小程序中，CSS 选择器 ::after 和 ::before 用于在元素内容前或后插入额外的内容。它们属于 CSS 的伪元素（pseudo-elements），可以用来增加装饰效果或者在内容之前/之后插入一些视觉效果。

基本语法

::before：在元素内容之前插入内容。
::after：在元素内容之后插入内容。

这两个伪元素都可以用于添加额外的内容，并且可以通过 content 属性定义要插入的内容。

假设我们有一个简单的微信小程序页面，我们希望在每个标题前面添加一个图标，在每个段落后面添加一个小图标。我们可以通过 ::before 和 ::after 实现这个效果。

WXML 部分

<!-- pages/index/index.wxml -->
<view class="container">
  <text class="title">这是一个标题
  <text class="content">这是一些内容。
</text class="content"></text class="title"></view class="container">

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;
}