::before实现骨架屏仅适用于单个块级元素的简单占位，无法撑开父容器高度或替代真实子元素结构；必须显式设置尺寸、背景及动画，且需父元素设position: relative；多区域骨架需拆分子元素、用真实DOM或::after补位，复杂场景应改用专用库。
用 ::before 实现骨架屏的关键限制
直接用 ::before 伪元素模拟骨架屏，只适用于**单个块级元素的简单占位**，比如按钮、头像、卡片标题。它无法撑开父容器高度，也不能替代真实子元素结构——因为伪元素不参与文档流，height 和 margin 在父容器未设高时几乎无效。
::before 骨架必须配合显式尺寸和背景动画
纯靠 content: "" 不会显示任何东西；必须手动设置尺寸、背景色或渐变，并加 loading 动画。常见错误是忘记设 display: block 或漏掉 position: absolute 导致定位失效。
- 父元素需设
position: relative，否则::before会相对于最近定位祖先偏移 - 骨架宽度建议用
width: 100%，高度用固定值（如height: 24px）或aspect-ratio（兼容性有限） - 推荐用
background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%)+background-size: 200% 100%搭配animation
.skeleton-title::before {
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 24px;
background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
background-size: 200% 100%;
animation: loading 1.5s infinite;
}
@keyframes loading {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
多区域骨架不能只靠 ::before，得用真实 DOM 或 ::after 补位
一个卡片有标题 + 头像 + 摘要？::before 只能画一层。此时要么：
— 把骨架拆成多个带 ::before 的子元素（每个子元素独立定位）
— 或改用真实 <span class="skeleton"></span> 节点，更可控
— 或同时用 ::before 和 ::after 模拟两个区块（但维护成本陡增）
- 伪元素无法设置
border-radius后再加阴影模拟头像，得用mask-image或额外包裹层 - 响应式下
::before宽度百分比可能错乱，建议配合min-width或max-width - SSR 场景中，服务端渲染的伪元素不会触发 CSS 动画，首帧无 loading 效果
真正上线前必须关掉伪元素骨架，别留隐患
很多人加完 ::before 骨架后，等数据加载完只隐藏内容，却忘了移除或禁用伪元素——结果骨架和真实内容叠在一起，或者在暗色模式下因背景色没适配变成黑块。
立即学习“前端免费学习笔记（深入）”；
- 最佳实践：用 JS 控制类名切换，比如
is-loaded，然后写.is-loaded::before { display: none; } - 避免用
visibility: hidden，它仍占布局空间且伪元素动画还在跑 - 检查 DevTools 的 Computed 面板，确认
::before确实已不渲染（而非被遮挡）
react-loading-skeleton），不然调试时你会反复怀疑是不是 z-index 没设对。 
