使用::before和::after结合position可实现无需额外标签的浮动装饰。1. 父元素设为relative，伪元素用absolute定位实现精确布局；2. 通过@keyframes动画配合transform和opacity模拟上下浮动与渐变效果；3. 同时使用两个伪元素创建多层装饰，如投影与高光，并用z-index控制层级；4. 注意设置content、合理使用transform优化性能，避免过度动画以保持界面清爽。
使用CSS伪元素 ::before 和 ::after 结合 position 属性，可以轻松实现浮动装饰效果，比如飘动的光点、悬浮的线条或背景中的动态点缀。这种做法无需额外HTML标签，结构更简洁，视觉表现力更强。
1. 基础定位：为伪元素设置浮动位置
要让伪元素脱离文档流并精确控制位置，必须使用 position: absolute 或 position: relative。通常父元素设为 position: relative，伪元素用 absolute 定位。
示例：.box {
position: relative;
width: 200px;
height: 100px;
background: #f0f0f0;
}
.box::before {
content: '';
position: absolute;
top: -10px;
left: 30px;
width: 12px;
height: 12px;
background: #ff6b6b;
border-radius: 50%;
}
这样就在容器上方“漂浮”了一个小圆点，形成轻盈的装饰感。
2. 动态浮动：结合动画模拟漂浮感
通过 @keyframes 配合 transform 和 opacity，可以让伪元素产生上下浮动、渐隐渐现的效果，增强视觉层次。
立即学习“前端免费学习笔记（深入）”；
添加动画示例：
.box::after {
content: '';
position: absolute;
bottom: -15px;
right: 20px;
width: 8px;
height: 8px;
background: #4d9fff;
border-radius: 50%;
animation: float 2s ease-in-out infinite;
}
@keyframes float {
0%, 100% {
transform: translateY(0);
opacity: 0.6;
}
50% {
transform: translateY(-10px);
opacity: 1;
}
}
这个小圆点会上下轻微浮动，像气泡一样升起，营造出轻盈的装饰氛围。
3. 多层装饰：组合多个伪元素增强效果
一个元素可以同时使用 ::before 和 ::after，创建多层装饰。例如，一个做阴影扩散，另一个做高光点缀，提升设计质感。
双伪元素装饰技巧：- ::before 可用于底部投影或波纹扩散
- ::after 更适合顶部亮点或浮动粒子
- 通过 z-index 控制层级，避免遮挡内容
4. 实用技巧与注意事项
实现浮动装饰时，有几个关键点能避免常见问题：
- 务必设置 content 属性，否则伪元素不会渲染
- 父元素记得加 position: relative，确保绝对定位基于自身
- 使用 transform 而非改变 top/left 做动画，性能更优
- 透明度和位移结合，比单纯移动更自然
- 避免过度使用动画，保持界面清爽
