伪元素必须用双冒号::而非单冒号:，是CSS3规范主动语义区分：单冒号专用于伪类（选状态），双冒号专用于伪元素（造虚拟内容）；::before与:before功能等效但混用不推荐，现代项目应统一用::以避免混淆、确保工具链兼容及新伪元素（如::placeholder）正常生效。
为什么伪元素必须用 :: 而不是 :？
这不是浏览器“不支持单冒号”，而是 CSS 规范在 CSS3 中**主动区分语义**：单冒号 : 专用于伪类（如 :hover、:nth-child），双冒号 :: 专用于伪元素（如 ::before、::first-letter）。目的是让开发者一眼看出——你是在选“状态”还是在造“虚拟内容”。
::before 和 :before 在实际项目中能混用吗？
能，但不推荐。现代浏览器（Chrome 4+、Firefox 3.5+、Safari 4+、Edge 12+）都同时支持两种写法，功能完全等效；但 IE8 只认 :before，且不支持 content: url() 等高级用法。所以：
- 若需兼容 IE8，只能用
:before，并避开content中的图片或计数器引用 - 若项目已放弃 IE8，一律用
::before，避免和:not()、:is()等伪类混淆 - Vue / React 组件 scoped style 或 CSS-in-JS 工具（如 Linaria）可能对单冒号解析异常，优先用双冒号更稳妥
为什么 content 属性是伪元素生效的前提？
::before 和 ::after 默认不渲染，除非显式声明 content。这是硬性规则，不是可选项：
-
content: ""—— 空字符串，生成一个无内容但可设宽高/背景的占位节点 -
content: "→"—— 插入纯文本（注意：不继承父元素字体，需单独设font-family） -
content: attr(data-label)—— 动态读取 HTML 属性值，适合多语言场景 -
content: none—— 显式隐藏，比display: none更彻底（后者仍占 DOM 位置）
漏写 content 是最常见的“伪元素不显示”原因，检查控制台不会报错，只会静默失效。
立即学习“前端免费学习笔记（深入）”；
伪元素在 DOM 中真的不存在吗？
是的，它不参与 HTML 解析，也不出现在 DevTools 的 Elements 面板里（除非勾选 “Show user agent shadow DOM” 并展开某些特殊节点）。这意味着：
- JavaScript 无法用
document.querySelector("::before")获取它 - 无障碍工具（如屏幕阅读器）默认忽略
content中的纯文本，除非加aria-hidden="false"+role="text" - 打印样式表中，部分旧版浏览器会跳过伪元素渲染，需额外用
@media print覆盖
真正容易被忽略的是：伪元素的层叠上下文（stacking context）由其宿主元素决定，而不是自身 z-index —— 即使设了 position: relative; z-index: 999，若父元素没触发层叠上下文，它仍会被兄弟元素遮挡。
