::before和::after伪元素通过content属性为按钮添加装饰，可实现悬浮动画、图标、光效等视觉增强。1. 必须声明content属性；2. 利用定位与过渡创建动态效果；3. 结合渐变模拟光晕扫过；4. 保持HTML结构简洁，提升交互体验。
在CSS中，::before 和 ::after 伪元素是为现有元素添加装饰内容的强大工具。它们不改变HTML结构，就能实现视觉增强效果，特别适合用于按钮的装饰设计。通过这两个伪元素，你可以添加图标、边框延伸、悬停动画等效果，让按钮更具吸引力。
基本语法与使用前提
::before 和 ::after 必须配合 content 属性使用，即使内容为空（content: ""）也必须声明。它们会生成一个行内元素，依附于所选元素的前后位置。
例如给按钮添加基础伪元素：.btn::before {
content: "";
position: absolute;
width: 10px;
height: 10px;
background: #007acc;
left: -5px;
top: 50%;
transform: translateY(-50%);
}
这样就在按钮左侧添加了一个小圆点装饰。注意要将按钮的 position 设为 relative，以便伪元素能相对其定位。
添加悬浮动画装饰
利用伪元素可以创建动态的悬停效果，比如从两侧滑出线条或光效。
立即学习“前端免费学习笔记（深入）”；
示例：按钮悬停时两侧出现延伸线条.btn {
position: relative;
padding: 12px 24px;
overflow: hidden;
}
.btn::before,
.btn::after {
content: "";
position: absolute;
height: 2px;
background: #000;
width: 0;
transition: width 0.3s ease;
}
.btn::before {
top: 0;
left: 0;
}
.btn::after {
bottom: 0;
right: 0;
}
.btn:hover::before,
.btn:hover::after {
width: 100%;
}
鼠标移上时，上下两条线从两端伸展，形成包围动效，提升交互感。
制作图标或符号装饰
伪元素可用于在按钮前后添加小图标或特殊符号，比如箭头、星号等，无需额外图片或字体图标。
示例：按钮右侧添加箭头.btn-arrow::after {
content: "→";
margin-left: 8px;
opacity: 0;
transition: opacity 0.3s, transform 0.3s;
}
.btn-arrow:hover::after {
opacity: 1;
transform: translateX(4px);
}
箭头默认隐藏，悬停时淡入并向右轻微移动，营造“前进”暗示。
创建背景遮罩或光晕效果
结合渐变和模糊，伪元素还能模拟光晕或遮罩层，增强视觉层次。
示例：按钮悬停时光斑扫过.btn-glow {
position: relative;
overflow: hidden;
}
.btn-glow::before {
content: "";
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(
90deg,
transparent,
rgba(255, 255, 255, 0.6),
transparent
);
transition: left 0.5s;
}
.btn-glow:hover::before {
left: 100%;
}
这个效果像一道光从按钮上快速掠过，常用于现代风格的UI设计。
基本上就这些。合理使用 ::before 与 ::after 能极大丰富按钮表现力，同时保持HTML简洁。关键在于控制 content、定位和动画节奏，避免过度干扰用户操作。
