伪元素必须配合content属性才能渲染，否则透明不占布局；默认display为inline，需设block等才生效宽高；无法绑定事件或被JS获取，不被屏幕阅读器识别。
伪元素必须配合 content 属性才能渲染
不写 content，::before 和 ::after 就是透明的、不占布局空间的空壳——哪怕加了 background 或 border 也完全不会显示。
常见错误现象：::after 设置了 width/height 却死活看不见；调试时用 DevTools 看到伪元素节点存在，但页面空白。
-
content: ""是最常用解法，空字符串即可触发渲染（注意不是none） -
content: "·"、content: "→"这类可见字符适合做装饰符号 -
content: attr(data-label)可读取元素属性值，但要求该属性真实存在且非空 -
content: url(./icon.svg)支持内联图片，但加载失败时整个伪元素失效，无 fallback
伪元素默认是 inline，宽高/定位需手动干预
很多人以为设了 width 和 height 就能当块级盒子用，结果发现没反应——因为 ::before/::after 默认是 display: inline，而 inline 元素无视 width/height。
使用场景：画分割线、叠加角标、模拟 tooltip 箭头等需要精确控制尺寸的场合。
立即学习“前端免费学习笔记（深入）”；
- 必须显式设
display: block或display: inline-block才能生效宽高 - 绝对定位（
position: absolute）是最常用手段，但父容器得是position: relative或其他非static值 - 若用于清除浮动，
display: table比block更稳妥（兼容 IE8+） - Flex/Grid 容器中，伪元素会自动成为 flex item/grid item，无需额外 display
伪元素无法绑定事件，也不在 DOM 树中可遍历
你不能给 ::before 写 onclick，也不能用 document.querySelector("::before") 获取它——它不是真实节点，只是渲染层的“影子”。
容易踩的坑：试图用 JS 动态修改伪元素内容，或依赖它做交互反馈。
- 想响应点击？只能监听宿主元素，再通过
event.target判断位置（比如用getBoundingClientRect()算偏移） - 想动态变内容？改不了
content，但可以切换 class，靠 CSS 变量或不同 class 下的content值来间接控制 - 想用伪元素做可访问性标签？不行。屏幕阅读器完全忽略它，替代文本必须放真实 HTML 里
- 伪元素的 z-index 受限于宿主元素层级，不能跨出父堆叠上下文
兼容性与性能要注意这些边界
现代浏览器基本没问题，但老项目或混合渲染场景下，几个细节常被忽略。
参数差异：CSS 变量在 content 中的支持度比想象中低（Chrome 79+、Firefox 73+ 才支持 content: var(--label)）。
-
::before和::after是双冒号语法，单冒号:before是旧写法，IE8 只认单冒号，但已淘汰 - 伪元素继承宿主元素的字体、颜色等，但不继承
margin、padding—— 它们本就不属于盒模型 - 大量使用伪元素（比如列表项每项都加
::after装饰点）可能拖慢重绘，尤其在移动端 - 伪元素不能用在
<img alt="CSS伪元素selector详解_::before与::after的创意用法" >、<input>等替换元素上（部分浏览器允许，但行为不一致）
真正难的不是怎么写，而是想清楚这个视觉效果是不是非得用伪元素——有时候一个 <span></span> 更可控、更可测、更容易协作。
