伪元素必须用双冒号语法且声明content属性才生效；默认为inline需设display，无DOM节点不响应事件，屏幕阅读器不可读。
伪元素名必须用双冒号，单冒号会触发兼容模式
现代 CSS 中，::before 和 ::after 是标准写法；:before 和 :after 虽然仍被多数浏览器支持，但属于 CSS2 旧语法，仅用于向后兼容。如果在使用 content 插入图标或装饰时发现样式不生效，先检查是否误用了单冒号——尤其在搭配 display: flex 或 position: absolute 时，旧语法在某些构建工具（如旧版 PostCSS）中可能被错误剥离。
- Vue / Svelte 单文件组件里，
<style scoped></style>下伪元素必须写双冒号，否则可能被作用域处理逻辑忽略 - IE8 及更早版本只认单冒号，但已无实际维护价值，不建议为它降级写法
-
::first-line和::first-letter必须用双冒号，单冒号在所有浏览器中均无效
::before 和 ::after 必须声明 content 属性才渲染
这是最常踩的坑：::before 和 ::after 默认不显示，哪怕设置了 background-color 或 border，只要 content 为空或缺失，整个伪元素就等于不存在。空字符串 content: "" 是合法且常用的占位写法。
- 想插入 Unicode 图标？用
content: "\e901"（注意反斜杠转义，不是"e901"） - 插入 HTML 实体（如
-
content: attr(data-label)可读取元素的 data 属性，但若属性不存在，结果为空字符串，伪元素仍不渲染
button::after {
content: ""; /* 必须有这一行 */
display: block;
width: 0;
height: 2px;
background: #007bff;
transition: width 0.3s;
}
<p>button:hover::after {
width: 100%;
}伪元素默认是 inline，布局受限需显式设 display
即使你给 ::before 设置了 width 和 height，它依然按 inline 元素排版：不能设宽高、不响应 margin-top/bottom、会受父元素 line-height 影响。常见表现是“明明写了 height: 20px 却没高度”。
- 要当块级容器用：加
display: block或display: flex - 要做绝对定位装饰：加
position: absolute，同时确保父元素有position: relative - 要垂直居中图标：用
display: flex+align-items: center，比vertical-align可靠得多
伪元素无法绑定事件，也不在 DOM 树中
你无法对 ::before 添加 onclick，也不能用 JavaScript 通过 querySelector 选中它——它不是真实节点，只是渲染层的视觉补丁。所有交互逻辑必须绑定到宿主元素上，再通过类名或属性控制伪元素状态。
立即学习“前端免费学习笔记（深入）”；
- 不要试图用
element.style.setProperty('--pseudo-bg', 'red')动态改伪元素样式（CSS 变量可间接实现，但需提前在规则中引用） - 动画过渡要写在伪元素自身规则里，例如
transition: transform 0.2s，不能靠 JS 操作 class 来触发（除非 class 控制的是transform等可继承属性） - 可访问性（a11y）方面，伪元素中的文字不会被屏幕阅读器读出，重要信息必须放在真实文本节点中
伪元素真正难的不是语法，而是时刻记住它没有 DOM 身份、不参与事件流、不继承所有父级样式——很多“为什么没效果”的问题，根源都在这个前提被忽略了。
