css 页面加载前占位骨架怎么实现_使用 before 伪元素模拟骨架

::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 的子元素（每个子元素独立定位）
— 或改用真实 节点，更可控
— 或同时用 ::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 确实已不渲染（而非被遮挡）

真实项目里，伪元素骨架适合快速原型或极简组件；一旦结构变复杂，立刻切到真实 DOM 骨架或专用库（如 react-loading-skeleton），不然调试时你会反复怀疑是不是 z-index 没设对。