CSS 伪元素（Pseudo-elements）

CSS 伪元素 是一种用来向某些元素 添加内容 或 创建样式 的技术。伪元素用于对文档中的某些部分进行样式化，而不需要在 HTML 中修改元素的结构。它们常常用于 插入内容 或 对元素的特定部分进行样式处理（如：第一个字母、第一行文字等）。

1️⃣ 常见的 CSS 伪元素

1.1 ::before

::before 伪元素用于在选定的元素 内容之前 插入生成的内容。你可以通过 content 属性向元素前添加内容。

语法：

element::before {
  content: "文本或内容";
  /* 其他样式 */
}

✅ 示例：

<p>这是段落文本。</p>

p::before {
  content: "★ ";
  color: red;
}

📌 效果：

• 在每个段落文本前插入一个红色的星号。

1.2 ::after

::after 伪元素用于在选定的元素 内容之后 插入生成的内容，类似于 ::before，但是它添加的是元素内容的 后部。

语法：

element::after {
  content: "文本或内容";
  /* 其他样式 */
}

✅ 示例：

<p>这是段落文本。</p>

p::after {
  content: " ★";
  color: green;
}

📌 效果：

• 在每个段落文本的后面插入一个绿色的星号。

1.3 ::first-letter

::first-letter 伪元素用于选中并样式化元素的 第一个字母。

语法：

element::first-letter {
  /* 样式 */
}

✅ 示例：

<p>这是一段文本。</p>

p::first-letter {
  font-size: 2em;
  color: blue;
  font-weight: bold;
}

📌 效果：

• 段落的第一个字母将变得更大，蓝色并加粗。

1.4 ::first-line

::first-line 伪元素用于选中并样式化元素的 第一行文本。

语法：

element::first-line {
  /* 样式 */
}

✅ 示例：

<p>这是一段文本。它包含多行内容。</p>

p::first-line {
  font-style: italic;
  color: darkorange;
}

📌 效果：

• 段落的第一行文本将变为斜体，并且颜色变为深橙色。

1.5 ::selection

::selection 伪元素用于定义用户选中文本时的样式。你可以控制选中文本的颜色、背景色等。

语法：

element::selection {
  background-color: yellow;
  color: black;
}

✅ 示例：

<p>选中这段文字看看效果。</p>

p::selection {
  background-color: yellow;
  color: black;
}

📌 效果：

• 当用户选中段落中的文本时，背景色会变成黄色，文本颜色会变为黑色。

2️⃣ 伪元素总结

3️⃣ 伪元素的注意事项

• 兼容性： ::before 和 ::after 是最常用的伪元素，它们得到大多数现代浏览器的广泛支持，但 ::first-letter、::first-line 和 ::selection 支持程度可能有所不同，尤其在旧版浏览器中需要注意兼容性。
• content 属性： ::before 和 ::after 伪元素必须使用 content 属性才能生效。如果没有设置 content，这两个伪元素将不起作用。
• 语法： 使用双冒号（::）是现代 CSS 的标准写法，但一些旧浏览器支持单冒号（:），例如 :before。为了兼容性，通常推荐使用双冒号。

💡 小贴士

• 创造装饰效果：伪元素非常适合用来为页面添加装饰性元素，而无需改变 HTML 结构（例如，添加图标、修饰符等）。
• 文本样式化：通过 ::first-letter 和 ::first-line 可以使文本的显示更加个性化。

通过使用伪元素，你可以增强页面的交互性和可视性，提升用户体验。