因为 <td> 默认 display: table-cell，不支持伪元素，浏览器会静默忽略 ::after；需改用内联容器（如 <span>）包裹内容并对其应用 ::after，配合 position: relative 和 attr(data-tip) 实现 hover 提示。
为什么 ::after 在 <td> 里不显示提示内容
直接给 <td> 添加 ::after 伪元素，大概率什么也看不到——因为 <td> 默认是 display: table-cell，而该显示类型不支持伪元素（浏览器会静默忽略）。这不是 bug，是规范行为。
解决思路很明确：把单元格变成支持伪元素的 display 类型，同时保持表格布局结构。实操中推荐两种方式：
- 给
<td>加display: table-cell; position: relative;，再用子容器（如<span>）包裹文字，对这个子容器设display: inline-block或inline，然后在其上用::after - 更稳妥的是不改
<td>的 display，而是让::after作用于内部一个显式声明为position: relative的内联元素（比如<span class="cell-content">）
如何用 ::before + data-tip 实现 hover 提示
核心是把提示文案存在自定义属性里，用伪元素读取并渲染。注意：CSS 无法读取任意 HTML 属性，但 attr() 函数只支持 content 中读取 data-* 属性值，且仅限字符串。
HTML 结构示例：
立即学习“前端免费学习笔记（深入）”；
<td> <span class="tip-trigger" data-tip="订单已发货，预计2天后送达">已发货</span> </td>
CSS 关键部分：
.tip-trigger {
position: relative;
display: inline-block;
}
.tip-trigger:hover::after {
content: attr(data-tip);
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
background: #333;
color: #fff;
padding: 4px 8px;
font-size: 12px;
border-radius: 3px;
white-space: nowrap;
z-index: 10;
}
.tip-trigger:hover::after {
margin-top: 4px;
}
要点说明：
- 必须加
position: relative到触发元素，否则::after的absolute会相对于<table>或最近定位祖先定位，位置飘忽 -
z-index要设，避免被相邻单元格遮挡（<td>默认无堆叠上下文） - 移动端慎用
:hover，可补充:focus-within或 JS 绑定点击展开
title 属性和伪元素提示哪个更适合生产环境
title 是原生方案，零成本、无障碍友好、无需 CSS，但它有硬伤：提示延迟高（约 1 秒）、样式完全不可控、移动端基本无效（iOS Safari 不触发）、无法支持富文本或图标。
伪元素方案可控性强，但要注意几个实际坑：
- 长文本自动换行需加
max-width: 200px; word-break: break-word;，否则溢出不可见 - 如果表格设置了
table-layout: fixed，提示层可能被截断，此时需在<table>上加overflow: visible - 动态插入的表格行（如 Vue/React 渲染），要确保
data-tip属性已存在，否则attr(data-tip)返回空字符串 - IE11 不支持
attr()用于非content属性，但这里只用于content，所以兼容性没问题
多行数据、带图标或状态色的提示怎么扩展
纯 CSS 无法生成多行或条件样式，但可以用多个 data- 属性配合类名控制：
<span class="tip-trigger state-shipped"
data-tip="已发货"
data-tip-detail="单号：SF123456789，2024-04-05 14:22 发出">
✅ 已发货
</span>
CSS 中用 attr(data-tip-detail) 拼接或替换内容，或通过类名切换不同 ::after 样式：
.state-shipped::after { background: #28a745; }
.state-pending::after { background: #ffc107; color: #212529; }
真正需要图标或复杂结构时，伪元素就力不从心了——这时候应该用真实 DOM 元素（如 <div class="tooltip-popover">）配合 JS 控制显隐。CSS 伪元素适合轻量、静态、单文案提示，别硬扛交互逻辑。
最常被忽略的一点：表格行高变化时，::after 的 top: 100% 可能导致提示层和文字间距错乱，建议统一用 top: calc(100% + 4px) 替代固定 margin-top，更健壮。
