::after伪元素必须设置content属性才能显示，空字符串或未设置均被忽略；需用字体图标、svg或background-image替代unicode以保兼容；content仅支持attr()动态值，不支持calc()；默认inline需设display或absolute定位，且默认pointer-events:none。
css::after伪元素必须设置content属性才能显示
不写 content，::after 就是空的，浏览器直接忽略。哪怕只加个空格也要写成 content: " "；想插图标或符号，常见写法是 content: "★" 或 Unicode 字符如 content: "\2714"（✔）。
注意：不能用 content: ""（空字符串）来“占位”，它等价于没设置，伪元素不会渲染。若真需要视觉上透明但占布局空间，得配合 visibility: hidden 或 opacity: 0。
插入图标时优先用字体图标或 SVG，避免 Unicode 兼容性问题
直接写 Unicode 如 content: "\e900" 看似方便，但依赖字体文件是否加载、是否包含该码点——尤其在跨设备或网络慢时容易回退成方框或问号。
- 推荐方案：用字体图标（如 IconFont），配合
font-family指定图标字体，content只写对应字符 - 更稳妥方案：用
background-image+padding-right模拟图标，把::after当纯装饰容器，里面不放文字内容 - 现代方案：用
mask-image或内联svg（需 base64 编码后塞进content，但兼容性有限）
content动态值只能靠 attr()，且仅限 HTML 属性值
content: attr(data-label) 可以读取元素的 data-label 属性并插入，比如 <button data-label="删除">×</button> → ::after 显示“删除”。但它不能执行计算、不能拼接字符串、不能读 class 或文本内容。
立即学习“前端免费学习笔记（深入）”；
常见误区：
-
content: attr(title) "（必填）"—— 合法，但只在支持 CSS Values 4 的浏览器（Chrome 115+、Safari 16.4+）才生效，旧版会整个失效 -
content: attr(innerHTML)—— 无效，HTML 内容不属于属性，attr()查不到 -
content: calc(1em + 2px)—— 不合法，content不支持calc()
::after默认是 inline，定位和尺寸控制要手动干预
它天生没有宽高，width/height 设了也无效，除非先设 display: block 或 inline-block。想右对齐图标、居中徽标、或做三角箭头，基本都要这样配：
span::after {
content: "→";
display: inline-block;
margin-left: 4px;
font-size: 12px;
}
如果要用绝对定位盖在父元素右上角（比如未读红点），就得让父元素 position: relative，::after 设 position: absolute，再调 top/right。这时候别忘了 z-index，否则可能被其他内容遮住。
最易忽略的一点：伪元素无法响应点击事件（pointer-events: none 是默认行为），如果需要交互，得把事件绑定到宿主元素，再通过 JS 判断位置或用 pointer-events: auto 显式开启——但后者在部分老 Android 浏览器里不生效。
