css 伪元素

/* 示例代码：使用 ::before 和 ::after 伪元素 */

/* 在段落前添加一个图标 */
p::before {
  content: "⭐ "; /* 在段落前插入一个星星图标 */
  color: gold;   /* 设置图标的颜色为金色 */
}

/* 在段落后添加一些额外的文本 */
p::after {
  content: " - 结束"; /* 在段落后插入“ - 结束”文本 */
  font-style: italic; /* 设置插入文本为斜体 */
}

/* 使用伪元素创建一个三角形（常用于下拉箭头） */
.arrow-down::after {
  content: ""; /* 不需要显示任何内容 */
  display: block; /* 将其作为块级元素处理 */
  width: 0;      /* 宽度为0 */
  height: 0;     /* 高度为0 */
  border-left: 10px solid transparent; /* 左边框为透明 */
  border-right: 10px solid transparent; /* 右边框为透明 */
  border-top: 10px solid black; /* 上边框为黑色，形成三角形 */
}

解释说明：

• ::before 和 ::after 是 CSS 中的伪元素，它们可以在元素的内容之前或之后插入生成的内容。
• content 属性是必须的，用于指定要插入的内容。如果不需要显示具体内容，可以设置为 ""（空字符串）。
• 伪元素可以用于添加装饰性内容、图标、提示信息等，而不会影响 HTML 的结构。
• 在示例中，我们展示了如何在段落前后插入内容，并通过伪元素创建了一个简单的三角形，常用于下拉箭头或提示框的设计。