css伪元素选择器

/* 示例代码：使用伪元素选择器 */

/* ::before 伪元素 */
p::before {
  content: "前置内容 - "; /* 在段落内容前插入文本 */
  color: blue; /* 设置插入文本的颜色 */
}

/* ::after 伪元素 */
p::after {
  content: " - 后置内容"; /* 在段落内容后插入文本 */
  color: red; /* 设置插入文本的颜色 */
}

/* 使用 ::first-letter 伪元素 */
p::first-letter {
  font-size: 2em; /* 设置段落首字母的字体大小 */
  font-weight: bold; /* 加粗首字母 */
}

/* 使用 ::first-line 伪元素 */
p::first-line {
  color: green; /* 设置段落第一行的颜色 */
  text-transform: uppercase; /* 将第一行文本转换为大写 */
}

解释说明：

1. ::before 和 ::after 伪元素用于在元素的内容之前或之后插入生成的内容。通过 content 属性可以指定插入的内容，可以是文本、图片等。

2. ::first-letter 伪元素用于选择段落的第一个字母，并对其应用样式，例如增大字体或加粗。

3. ::first-line 伪元素用于选择段落的第一行，并对其应用样式，例如改变颜色或文本大小。

这些伪元素选择器可以帮助你在不修改 HTML 结构的情况下，灵活地添加和控制页面中的样式效果。