通过CSS过渡与伪元素结合，可实现按钮下划线滑入、卡片悬浮光晕及标题装饰生长等效果，核心在于利用::before和::after创建独立动画图层，控制transform、opacity、尺寸等属性变化，配合transition实现自然视觉反馈，需注意content和定位设置以确保伪元素生效。
在现代网页设计中，CSS过渡（transition）与伪元素（::before、::after）的结合使用，能创造出细腻且富有层次感的装饰性效果。通过控制伪元素的显示、位置或样式变化，并配合过渡动画，可以让按钮、链接、卡片等元素在用户交互时呈现更自然的视觉反馈。
1. 伪元素作为装饰层实现滑动效果
利用 ::before 或 ::after 创建一个隐藏的装饰层，当鼠标悬停时，通过 transform 和 opacity 实现平滑进入的效果。
常见场景是按钮下划线从一侧滑入：
示例代码：
.button {
position: relative;
padding: 10px 20px;
background: transparent;
color: #007acc;
cursor: pointer;
}
.button::before {
content: '';
position: absolute;
bottom: 5px;
left: 0;
width: 0;
height: 2px;
background-color: #007acc;
transition: width 0.3s ease;
}
.button:hover::before {
width: 100%;
}
这里，::before 初始宽度为 0，hover 时扩展到 100%，配合 transition 实现横向伸展动画。
立即学习“前端免费学习笔记（深入）”；
2. 双伪元素构建悬浮光晕或边框动画
使用 ::before 和 ::after 分别创建不同样式的装饰层，比如外发光边框或内填充高亮，通过延迟或错位过渡增强动感。
技巧要点：
- 设置两个伪元素的 z-index 层级避免遮挡内容
- 用 scale 或 translate 控制入场路径
- 对 opacity 和 transform 同时添加过渡，使效果更柔和
.card {
position: relative;
padding: 20px;
border: 1px solid #ddd;
}
.card::before {
content: '';
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
background: rgba(0, 120, 255, 0.1);
opacity: 0;
transform: scale(0.8);
transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
z-index: -1;
}
.card:hover::before {
opacity: 1;
transform: scale(1);
}
3. 配合定位与尺寸过渡创造“生长”效果
将伪元素用于模拟线条延伸、方块扩张等“生长类”动画，适合导航项或标题装饰。
关键点在于初始状态隐藏（如 width/height 为 0 或 opacity 为 0），hover 时恢复目标值。
例如：标题下方短横线从中向两边展开
.title {
position: relative;
display: inline-block;
}
.title::after {
content: '';
position: absolute;
bottom: -5px;
left: 50%;
width: 0;
height: 2px;
background: #000;
transform: translateX(-50%);
transition: width 0.3s ease;
}
.title:hover::after {
width: 60%;
}
基本上就这些核心技巧。掌握 transition 与 ::before、::after 的配合，关键是理解伪元素是独立可动画的图层，再通过 transform、opacity、尺寸等属性的变化触发流畅过渡。不复杂但容易忽略细节，比如必须设置 content 和正确的 position 才能让伪元素生效。
