不需要在 HTML 中添加任何额外的标签，就能实现复杂的设计效果。

前端小目标2024-04-22 9:35

1. 基础知识

什么是伪元素选择器

伪元素选择器用来指定一个元素的特定部分或者在元素中创建虚拟内容。

最常见的伪元素选择器包括 ::before 和 ::after，它们分别用于在元素内容的前面和后面添加内容或样式。

伪元素选择器是为了增强对元素的控制，它们不需要在 HTML 中添加任何额外的标签，就能实现复杂的设计效果。

为何要使用伪元素选择器

减少 HTML 标记，保持结构的清晰和简洁。
在不影响 HTML 结构的前提下，添加装饰性或说明性的内容。
实现一些特殊的设计效果，比如清除浮动、创建形状、添加图标等，提升页面的视觉效果。

如何使用

在 CSS 中使用伪元素选择器，需要在选择器后面加上 ::before 或 ::after，并在相应的 CSS 规则中添加 content 属性。

content 属性可以包含文本、图片等内容。例如：

css 复制代码

.element::before {
  content: "★";
  color: red;
}

上面的代码会在 .element 类的元素内容前面添加一个红色的星号。

适用场景

添加图标或小图形，如按钮前的箭头。
创建特殊的装饰效果，如引号、边框装饰。
插入重复的内容，比如版权信息、章节标记。
清除浮动，维持布局的稳定。

2. 示例演示

下面是一个使用伪元素选择器的简单 HTML 示例。

html 复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>伪元素选择器示例</title>
  <style>
    .box::before {
      content: "【注意】";
      color: #e74c3c;
      font-weight: bold;
    }

    .box::after {
      content: "【结束】";
      color: #2ecc71;
      font-weight: bold;
    }

    .box {
      border: 1px solid #bdc3c7;
      padding: 10px;
      margin: 20px;
    }
</style>
</head>
<body>
  <div class="box">
    这是一个包含前后伪元素的盒子。
  </div>
</body>
</html>

在这个例子中，.box 类的元素会在内容前后分别添加"【注意】"和"【结束】"的文本，并且文本颜色和加粗样式有所区分。

这个简单的技巧可以在不改变 HTML 结构的情况下，增加额外的视觉提示效果。