CSS 伪类 :before 插入特殊字符详解

基础概念

:before 是 CSS 中的一个伪元素（虽然常被称为伪类，但准确来说是伪元素），它允许开发者在选定元素的内容之前插入生成的内容。这个特性常用于添加装饰性内容或图标，而不需要修改 HTML 结构。

使用方法

基本语法：

selector:before {
  content: "要插入的内容";
  /* 其他样式属性 */
}

插入特殊字符

在 :before 中插入特殊字符有几种方法：

1. 直接使用 Unicode 字符

.element:before {
  content: "\2022"; /* 插入圆点符号 (•) */
}

2. 使用 HTML 实体（需要转义）

.element:before {
  content: "\00A9"; /* 插入版权符号 (©) */
}

3. 使用 CSS 转义序列

.element:before {
  content: "\2192"; /* 插入右箭头 (→) */
}

常用特殊字符示例

| 用途 | Unicode | CSS 代码示例 | 显示效果 | |------------|---------|---------------------------|----------| | 圆点 | \2022 | content: "\2022"; | • | | 箭头右 | \2192 | content: "\2192"; | → | | 箭头左 | \2190 | content: "\2190"; | ← | | 版权符号 | \00A9 | content: "\00A9"; | © | | 注册商标 | \00AE | content: "\00AE"; | ® | | 欧元符号 | \20AC | content: "\20AC"; | € | | 星号 | \002A | content: "\002A"; | * | | 双引号 | \201C | content: "\201C"; | " | | 单引号 | \2018 | content: "\2018"; | ' |

实际应用示例

示例1：在列表项前添加自定义符号

ul.custom-bullets li:before {
  content: "\2726"; /* 五角星符号 */
  color: #ff5722;
  margin-right: 8px;
}

示例2：在链接前添加外部链接图标

a.external:before {
  content: "\2197"; /* 右上箭头 */
  margin-right: 4px;
  font-size: 0.8em;
}

示例3：在引用前添加引号

blockquote:before {
  content: "\201C"; /* 左双引号 */
  font-size: 3em;
  line-height: 0.1em;
  vertical-align: -0.4em;
  color: #ccc;
}

注意事项

1. 必须包含 content 属性：即使为空 (content: "";)，也必须声明 content 属性，否则伪元素不会显示。
2. 样式继承：:before 伪元素会继承父元素的一些样式属性。
3. 可访问性：屏幕阅读器可能会读取 :before 插入的内容，因此不要仅依赖它来传达重要信息。
4. 性能影响：过度使用伪元素可能会影响页面渲染性能。
5. 特殊字符显示：确保使用的字体包含你需要的特殊字符，否则可能显示为方框或其他替代符号。

通过合理使用 :before 伪元素和特殊字符，可以增强页面的视觉效果而不增加 HTML 结构的复杂性。