::after无法直接作用于<tr>元素，因其为置换元素且浏览器渲染限制导致伪元素不渲染；可行方案是作用于<td>/<th>并设position:relative，或改用显式<span>元素。
为什么 ::after 无法直接作用于 <tr> 元素
因为 <tr> 是置换元素（replaced element 的子类），且浏览器对表格单元格的渲染逻辑限制了伪元素的插入位置——::after 在 <tr> 上**不会渲染**，哪怕设置了 content 和尺寸。这是最常卡住的地方，不是 CSS 写错了，是 DOM 结构不支持。
真正能生效的两种方案：用 <td> 或 <th> 末尾单元格 + ::after
把状态点加在每行最后一个单元格（比如操作列或状态列）里，是最稳妥、兼容性最好的做法。关键点在于：
- 目标
<td>必须有明确的position: relative，否则::after会相对于表格容器定位 -
::after需设position: absolute，并用right: 8px; top: 50%; transform: translateY(-50%)居中对齐 - 避免用
display: inline-block等触发 BFC 的方式包裹内容，否则会影响absolute定位基准 - 若最后一列是空的（仅用于放状态点），记得设
width: 24px防止列宽塌缩
<td class="status-dot" style="position: relative; width: 24px;"></td>
.status-dot::after {
content: "";
position: absolute;
right: 8px;
top: 50%;
transform: translateY(-50%);
width: 8px;
height: 8px;
border-radius: 50%;
background-color: #4CAF50;
}
用 <span> 替代伪元素？什么时候更合适
当状态颜色需动态绑定（如 Vue/React 中根据 status 字段切换）、或需要响应点击事件时，硬塞 ::after 反而增加维护成本。此时直接在最后一列插入一个 <span class="status-indicator"></span> 更清晰：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
-
<span>可绑定class控制颜色（如status-indicator--success/--error） - JS 可直接监听该元素，无需通过
event.target.closest()回溯 - 服务端渲染或 SSR 场景下，伪元素无法被爬虫识别，而真实 DOM 节点可保留语义
- 若表格列数不固定（比如响应式隐藏某些列），靠“最后一列”定位伪元素容易错位，显式
<span>更可控
IE11 及更老浏览器的 fallback 处理
IE11 支持 ::after，但对 transform: translateY(-50%) 在 absolute 元素上的垂直居中支持不稳定。如果必须兼容 IE11：
立即学习“前端免费学习笔记（深入）”；
- 改用
top: 4px（假设单元格行高为 16px，手动计算偏移） - 或退化为
line-height: 0+vertical-align: middle配合内联块级<span> - 避免使用
flex布局在<td>内居中 —— IE11 对表格单元格内的 flex 支持极差
真正麻烦的不是怎么画圆点，而是它出现在哪一列、是否随排序/筛选重排、是否要透出父容器溢出边界 —— 这些才是上线前容易漏掉的点。
