CSS伪元素特效实用技巧分享

本文深入解析了CSS伪元素（如::before和::after）在实际开发中的核心使用规范与常见陷阱：强调必须采用双冒号语法并显式声明content属性（哪怕是空字符串）才能生效，指出其默认为inline导致宽高、定位、居中等布局行为受限，需手动设置display或position；同时明确伪元素无真实DOM节点、不响应事件、不被屏幕阅读器识别，所有交互和可访问性设计都必须围绕宿主元素展开。这些本质特性决定了伪元素是纯粹的“视觉装饰层”，理解并尊重这一边界，才是写出稳定、高效、无障碍CSS特效的关键。

伪元素名必须用双冒号，单冒号会触发兼容模式

现代 CSS 中，::before 和 ::after 是标准写法；:before 和 :after 虽然仍被多数浏览器支持，但属于 CSS2 旧语法，仅用于向后兼容。如果在使用 content 插入图标或装饰时发现样式不生效，先检查是否误用了单冒号——尤其在搭配 display: flex 或 position: absolute 时，旧语法在某些构建工具（如旧版 PostCSS）中可能被错误剥离。

• Vue / Svelte 单文件组件里，