伪元素不是真实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 就等于不存在。

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

• 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，整个伪元素实例就从渲染树中移除，连盒模型都不生成——这不是隐藏，是彻底不创建。很多调试失败，其实卡在这一步。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！