应优先使用::before，因其符合CSS3规范、语义清晰且主流浏览器均支持；仅当需兼容IE8时才降级用:before，但需注意IE8自身限制。
伪元素写法差异本质是标准演进，不是功能区别
两者渲染效果完全一致，::before 是 CSS3 规范明确规定的伪元素语法，:before 是 CSS2 的遗留写法。W3C 引入双冒号就是为了把伪元素（如 ::before、::after、::selection）和伪类（如 :hover、:focus）在语法层面区分开——前者操作虚拟节点，后者匹配元素状态。
生产环境该用 ::before 还是 :before？看兼容性底线
如果你的项目已放弃支持 IE8 及更老版本（绝大多数现代项目都如此），直接用 ::before：
- 符合当前 CSS 规范，语义清晰，团队协作时不易混淆伪类/伪元素
- 新伪元素（如
::marker、::backdrop）只支持双冒号写法，统一风格便于未来扩展 - 主流浏览器（Chrome 4+、Firefox 3.5+、Safari 4+、Edge 12+、iOS/Android 主流 WebView）全部支持
::before - IE9–IE11 虽不识别双冒号的新伪元素（如
::placeholder），但对::before和:before都支持
只有当项目明确要求兼容 IE8 时，才需降级为 :before；但要注意：IE8 不支持 content 中的 url() 值，且伪元素无法继承某些样式（如 font），这不是冒号问题，而是引擎限制。
容易被忽略的三个实际坑点
无论选单冒号还是双冒号，这些行为都一样，但常被误认为是写法导致的：
立即学习“前端免费学习笔记（深入）”；
-
::before必须配合content属性，值为空（content: ""）也得写，否则不渲染 -
<img>、<input>、<iframe>等替换元素不支持::before/:before，因为它们不是内容容器 - 伪元素生成的节点不在 DOM 中，
document.querySelector("::before")查不到，也不能用 JS 直接修改其content
团队落地建议：别纠结“能不能用”，要管“怎么统一”
真实项目里出问题的从来不是 ::before 渲染失败，而是团队混用两种写法，导致 Code Review 成本上升、CSS Lint 报警、新人看不懂为什么有的地方用单冒号有的用双冒号。建议：
- 在 ESLint / Stylelint 配置中启用
css/no-unknown-pseudo-element和css/selector-no-vendor-prefix类规则，强制统一为::before - 如果历史代码大量使用
:before，可借助postcss-preset-env或autoprefixer自动转换，无需手动改 - 注意构建工具是否解析
::before—— 某些老旧的 CSS-in-JS 库（如早期 styled-components v4）对双冒号支持不稳定，需查对应版本文档
真正影响交付的，往往不是语法本身，而是团队对同一概念是否建立了稳定共识。
