伪元素::before和::after可通过@keyframes实现动画，需设置content属性并借助父元素状态触发；1. 定义content后可应用animation；2. 结合hover等状态控制动画时机；3. 常用于下划线滑入、光标闪烁等装饰效果；4. 注意content必设、display调整及浏览器兼容性，避免复杂动画影响性能。
在CSS中，伪元素 ::before 和 ::after 可以结合 @keyframes 实现丰富的动画效果。虽然伪元素不能直接绑定类名，但可以通过父元素触发其动画，从而实现视觉上的动态变化。
1. 基本语法结构
伪元素需要先定义内容（content 属性），然后才能显示并应用样式和动画。animation 属性可以像普通元素一样添加到 ::before 或 ::after 上。
.element::before {
content: "";
display: block;
width: 10px;
height: 10px;
background: red;
animation: slideIn 1s ease-in-out infinite;
}
@keyframes slideIn {
0% { transform: translateX(-20px); opacity: 0; }
100% { transform: translateX(0); opacity: 1; }
}
2. 控制动画触发时机
动画不一定要页面加载就运行，可以结合 hover、focus 等状态控制伪元素的出现或运动。
.button:hover::after {
content: "→";
margin-left: 5px;
animation: bounce 0.6s ease-out;
}
@keyframes bounce {
0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
40% { transform: translateY(-5px); }
60% { transform: translateY(-3px); }
}
当用户将鼠标悬停在 .button 上时，箭头符号从文字后弹出，形成轻量交互反馈。
立即学习“前端免费学习笔记（深入）”；
3. 动态生成装饰性动画
利用伪元素创建动态下划线、光标闪烁、背景流动等效果非常常见。
- 下划线滑入：用 ::after 创建线条，通过 transform scaleX 实现伸缩动画
- 光标闪烁：在文本末尾用 ::after 模拟光标，配合 opacity 动画实现明暗交替
- 渐变流动背景：结合 background 和 animation，让伪元素呈现动感纹理
4. 注意事项与兼容性
使用过程中需注意以下几点：
- 必须设置 content，即使为空字符串，否则伪元素不会渲染
- 某些浏览器对伪元素的 animation-fill-mode 支持有限，建议测试关键帧起止状态
- 伪元素默认为 inline，常需设为 block 或 inline-block 才能控制尺寸和变换
- 避免在伪元素上使用过于复杂的动画，可能影响性能
