伪元素需显式声明 content: "" 才能渲染，配合 position: absolute 和 display: block 可实现不占布局空间的装饰性叠加；其零HTML冗余、仅重绘、CSS可控性强，但不可交互、无无障碍支持。
用 ::before 或 ::after 实现内容隐藏+装饰的常见写法
直接在伪元素里加 content: ""，再配合 position: absolute 和尺寸控制，就能把装饰性图形（比如小图标、分隔线、背景色块）“挂”在元素上，而不影响原有文本流。关键不是“隐藏”，而是“不占布局空间地叠加”。
常见错误是忘了设 content —— 没有它，::before/::after 根本不会渲染。
-
content必须显式声明，哪怕只是content: "" - 若要定位到父元素外部（如左/右悬垂装饰），父元素需设
position: relative - 伪元素默认是 inline，设
display: block或inline-block才能控制宽高
为什么用伪元素比额外加
伪元素不参与 DOM 结构，JS 无法通过 querySelector 直接选中，也不触发重排（reflow），只影响重绘（repaint）。适合纯视觉装饰，比如标题下的细线、按钮右箭头、标签角标。
但注意：伪元素不能响应事件（click、hover 等需作用于宿主元素），也不能被屏幕阅读器读取（无障碍场景慎用）。
立即学习“前端免费学习笔记（深入）”；
- 优势：零 HTML 冗余、CSS 可控性强、复用方便（用
class统一管理） - 限制：不能插 HTML、不能绑定事件监听、SEO 和 a11y 不感知
- 替代方案：需要交互时，改用
或带aria-hidden="true"的
visibility: hidden 和 display: none 对伪元素无效
伪元素不是真实节点，所以对宿主元素设置 visibility: hidden 或 display: none，会连带隐藏整个元素及其伪元素；但单独给伪元素设这些属性没意义——它本来就不在文档流里。
真正控制伪元素显隐，只能靠自身 CSS：
- 用
opacity: 0+pointer-events: none实现“视觉隐藏但保留占位” - 用
transform: scale(0)或clip-path: inset(100%)做无渲染隐藏（更节省性能） - 想条件显示？结合宿主类名，比如
.btn--primary::after { ... }
容易忽略的兼容性和字体图标陷阱
如果用伪元素显示字体图标（如 Font Awesome 的 \f00c），必须确保：font-family 正确、font-weight 匹配、且字体已加载完成。否则可能闪出方块或空白。
- 推荐用
font-display: swap防止 FOIT（字体阻塞） - 避免在伪元素中写长文本，IE11 不支持
content里的换行符或复杂转义 - 调试时可在 DevTools 中勾选 “Show user agent shadow DOM”，确认伪元素是否被渲染出来
最常卡住的地方其实是 content 值写错、父元素没设 position: relative 导致定位漂移，或者忘记设 z-index 被其他层盖住——这些比样式本身更耗时间。
