CSS ::before 和 ::after 伪元素详解

1. 伪元素基本概念

伪元素是 CSS 中的特殊概念，它们不是真正的 HTML 元素，而是通过 CSS 在现有元素中"凭空"插入的虚拟元素。::before 和 ::after 分别表示在目标元素内容的前面和后面插入内容。

核心特点：

不会出现在 DOM 结构中，不改变文档内容
仅通过 CSS 渲染添加，不可通过 JavaScript 直接操作
默认显示为行内元素（inline）
必须设置 content 属性才能生效

2. 基本语法与使用

2.1 语法格式

css

css 复制代码

selector::before {
property: value;
}
selector::after {
property: value;
}

2.2 必须的 content 属性

content 属性是伪元素的"开关"，必须设置才能显示伪元素。

css

css 复制代码

/* 空内容 */
.element::before {
content: '';
}
/* 文本内容 */
.element::after {
content: "后缀文本";
}
/* 使用属性值 */
.element::before {
content: attr(data-label);
}
/* 使用图标字体 */
.element::after {
content: "★";

}

3. 实际应用示例

3.1 添加装饰性图标

css

css 复制代码

/* 在链接后添加外部链接图标 */
.external-link::after {
content: "🔗";
margin-left: 5px;
color: blue;
}
/* 在标题前添加箭头 */
h2::before {
content: "→";
color: orange;
margin-right: 10px;
}

3.2 创建图形效果

css

css 复制代码

/* 创建三角形 */
.triangle::after {
content: '';
display: block;
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid red;
}
/* 双色背景效果 */
.card {
position: relative;
background: lightblue;
}
.card::after {
content: '';
position: absolute;
top: 0;
right: 0;
width: 30%;
height: 100%;
background: lightgreen;
}

3.3 清除浮动（经典用法）

css

css 复制代码

.clearfix::after {
content: '';
display: table;
clear: both;
}

3.4 添加自定义编号

css

css 复制代码

ol.custom::before {
content: counter(item) ".";
counter-increment: item;
margin-right: 10px;
font-weight: bold;
}

4. 关键特性与注意事项

4.1 显示模式控制

伪元素默认是行内元素，但可以改变显示模式：

css

css 复制代码

.element::before {
content: '';
display: block; /* 改为块级元素 */
width: 100px;
height: 50px;
background: pink;
}
.element::after {
content: '';
display: inline-block; /* 改为行内块元素 */
width: 20px;
height: 20px;
}

4.2 定位与层叠

伪元素可以像普通元素一样进行定位：

css

css 复制代码

.tooltip {
position: relative;
}
.tooltip::after {
content: attr(data-tooltip);
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
background: black;
color: white;
padding: 5px;
border-radius: 3px;
white-space: nowrap;
}

4.3 动画与过渡效果

伪元素支持 CSS 动画和过渡：

css

css 复制代码

.button::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: rgba(255,255,255,0.2);
transition: left 0.3s ease;
}
.button:hover::before {
left: 0;
}

5. 重要注意事项

content 属性必需 ：即使设置为空字符串 content: '' 也必须存在
可替换元素不支持 ：``, <input>, <textarea> 等单标签元素通常不支持伪元素
浏览器兼容性：现代浏览器都支持，但旧版 IE 可能需要单冒号写法（:before/:after）
性能考虑：过度使用伪元素可能影响渲染性能，应适度使用

6. 伪元素 vs 伪类

特性	伪元素	伪类
语法	`::before`, `::after`	`:hover`, `:focus`
作用	操作元素的特定部分	选择元素的特定状态
内容	可以插入新内容	不能插入内容

7. 实用技巧总结

保持 HTML 整洁：使用伪元素避免添加不必要的 DOM 元素
灵活的内容设置 ：content 可以接受字符串、属性值、计数器等
响应式设计：伪元素样式可以随媒体查询变化
可访问性考虑：确保伪元素内容不会影响屏幕阅读器体验

伪元素是 CSS 中强大的工具，合理使用可以大大增强页面的视觉效果和交互体验，同时保持代码的简洁性和可维护性。