伪元素必须配合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() 只能读取字符串属性，不能执行计算或调用函数
content: attr(data-count) 能取到 <div data-count="5"> 中的 "5"，但无法做 attr(data-count) + " items" 这类拼接——CSS 不支持表达式。
立即学习“前端免费学习笔记（深入）”；
如果需要动态拼接，得靠 JS 预设好完整字符串：
<button data-label="Save changes">保存</button>
button::after {
content: attr(data-label); /* ✅ 输出 "Save changes" */
}注意：attr() 对大小写敏感，且不支持自定义属性以外的原生属性（如 attr(class) 无效）。
- 推荐用
data-前缀命名自定义属性 - 若值含空格或特殊字符，HTML 中需加引号：
data-desc="New & improved" - IE8 及更早版本不支持
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"，用户复制文本时不会包含它；视障用户使用读屏软件时，这段内容通常被跳过。
如果内容具有语义（比如图标替代文字、状态提示），应避免仅靠伪元素呈现：
- 用真实 HTML 元素 +
aria-hidden="true"控制可访问性 - 或对伪元素添加
aria-hidden="false"并配合role="img"（但支持度有限） - 真正需要被读出的内容，优先写进 HTML，再用 CSS 隐藏视觉样式（
visually-hidden类）
例如，表示“必填”的星号，更稳妥的方式是：
<label>姓名<span aria-hidden="true" class="required-star">*</span></label>
而不是：
label::after { content: "*"; }伪元素插入内容看似简单，但 content 的强制性、attr() 的局限性、定位依赖父级 position、以及可访问性盲区，这四点最容易在线上环境突然暴露问题。
