伪元素不是真实DOM节点，无法被JS选中或操作，仅通过CSS渲染视觉内容；必须设置content属性才存在，且仅继承部分样式、不参与布局与事件。

伪元素不是真实 DOM 节点，不能被 JavaScript 选中、绑定事件、获取 offsetHeight 或参与 tab 键导航；它只是一段由 CSS 渲染出来的视觉内容。

伪元素无法被 JS 直接操作

伪元素（如 ::before、::after）不生成实际的 DOM 节点，所以 document.querySelector('p::before') 会报错，getBoundingClientRect() 也拿不到它的尺寸信息。

• getComputedStyle(p, '::before') 可读取其样式（如 content、color），但仅限只读
• element.addEventListener('click', ...) 对伪元素无效——点击区域只是“附着”在宿主元素上
• 无法用 innerHTML、appendChild 等 DOM 方法插入或修改伪元素内容

伪元素依赖 content 属性才能渲染

普通 HTML 元素默认可见，而伪元素必须显式设置 content（哪怕设为 content: ''）才会被浏览器创建并渲染。没写 content 就等于不存在。

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

• content: none 和未声明 content 效果不同：前者明确禁用，后者直接跳过创建
• content: '' 可用于纯装饰（比如清除浮动的 ::after），此时它占布局空间但无视觉内容
• content: url(...) 可插入图片，但该图片不会出现在页面资源列表里，也无法被右键保存

伪元素的层叠和继承行为特殊

伪元素默认渲染在宿主元素的「内容层」之上（即 z-index: auto 的堆叠上下文内），且只继承部分 CSS 属性（比如 color、font），不继承 display、margin 等布局属性。

立即学习“前端免费学习笔记（深入）”；

• ::before 总在宿主内容最前，::after 总在最后——这个顺序不可通过 z-index 改变（除非宿主本身是定位元素并建立新层叠上下文）
• 伪元素的 position 默认是 static，设为 absolute 时，其定位参考是宿主元素（不是最近的定位祖先）
• 伪元素无法触发 :hover，但宿主元素 hover 时，它的伪元素样式可响应变化

真正容易被忽略的是：伪元素的 content 值一旦为空字符串或 none，整个伪元素实例就从渲染树中移除，连盒模型都不生成——这不是隐藏，是彻底不创建。很多调试失败，其实卡在这一步。