伪元素必须配合content属性使用，否则不渲染；content可取空字符串、文本、attr()值等，但attr()不支持表达式且大小写敏感；伪元素定位依赖父元素position，不可直接交互或被读屏软件识别。
伪元素插入内容必须配合 content 属性使用
没有 content，::before 和 ::after 不会渲染任何东西，哪怕设置了颜色、尺寸或背景。浏览器会直接忽略该伪元素。
常见错误是只写样式却漏掉 content：
.btn::after {
display: inline-block;
width: 16px;
height: 16px;
background: url(icon.svg);
/* 缺少 content: ""; —— 此时什么都不会显示 */
}正确写法必须显式声明：
-
content: ""（空字符串，用于仅需样式无文字的场景） -
content: "✓"（纯文本） -
content: attr(data-label)（读取元素 HTML 属性值） -
content: open-quote或closing-quote（配合quotes使用）
attr() 只能读取字符串属性，不能执行计算或调用函数
立即学习“前端免费学习笔记（深入）”； 如果需要动态拼接，得靠 JS 预设好完整字符串： 注意： 伪元素默认是 常见需求：在按钮右上角加红点徽标： 用 如果内容具有语义（比如图标替代文字、状态提示），应避免仅靠伪元素呈现： 例如，表示“必填”的星号，更稳妥的方式是： 而不是： 伪元素插入内容看似简单，但 content: attr(data-count) 能取到 "5"，但无法做 attr(data-count) + " items" 这类拼接——CSS 不支持表达式。button::after {
content: attr(data-label); /* ✅ 输出 "Save changes" */
}attr() 对大小写敏感，且不支持自定义属性以外的原生属性（如 attr(class) 无效）。
data- 前缀命名自定义属性data-desc="New & improved"
attr()（仅支持 content 字符串字面量）
::before 和 ::after 的定位与层级受 position 和 z-index 影响inline 级别，且无法直接设置 z-index，除非其父元素有 position 值（relative、absolute 等）并形成层叠上下文。.badge::after {
content: "";
position: absolute;
top: -4px;
right: -4px;
width: 12px;
height: 12px;
background: #f00;
border-radius: 50%;
z-index: 1; /* ✅ 有效，因 .badge 已设 position: relative */
}
position，z-index 无效，伪元素可能被其他元素遮盖::before 渲染在元素内容最前，::after 在最后——这是 DOM 顺序，不是视觉堆叠顺序pointer-events: auto（且父元素未阻止）伪元素内容不可被选中、不可被屏幕阅读器读出（默认行为）
::after 插入“单位”如 content: "px"，用户复制文本时不会包含它；视障用户使用读屏软件时，这段内容通常被跳过。
aria-hidden="true" 控制可访问性aria-hidden="false" 并配合 role="img"（但支持度有限）visually-hidden 类）label::after { content: "*"; }content 的强制性、attr() 的局限性、定位依赖父级 position、以及可访问性盲区，这四点最容易在线上环境突然暴露问题。
