因为 默认 display: table-cell，不支持伪元素，浏览器会静默忽略 ::after；需改用内联容器（如 ）包裹内容并对其应用 ::after，配合 position: relative 和 attr(data-tip) 实现 hover 提示。

为什么 ::after 在 <td> 里不显示提示内容 <p>直接给 <code><td> 添加 <code>::after 伪元素，大概率什么也看不到——因为 <td> 默认是 <code>display: table-cell，而该显示类型不支持伪元素（浏览器会静默忽略）。这不是 bug，是规范行为。

解决思路很明确：把单元格变成支持伪元素的 display 类型，同时保持表格布局结构。实操中推荐两种方式：

• 给 <td> 加 <code>display: table-cell; position: relative;，再用子容器（如 <span></span>）包裹文字，对这个子容器设 display: inline-block 或 inline，然后在其上用 ::after
• 更稳妥的是不改 <td> 的 display，而是让 <code>::after 作用于内部一个显式声明为 position: relative 的内联元素（比如 <span class="cell-content"></span>）

  如何用 ::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;
  }

  要点说明：

  

  Html2md

  使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...

  下载
  • 必须加 position: relative 到触发元素，否则 ::after 的 absolute 会相对于 <table> 或最近定位祖先定位，位置飘忽 <li> <code>z-index 要设，避免被相邻单元格遮挡（<td> 默认无堆叠上下文） <li>移动端慎用 <code>:hover，可补充 :focus-within 或 JS 绑定点击展开

  title 属性和伪元素提示哪个更适合生产环境

  title 是原生方案，零成本、无障碍友好、无需 CSS，但它有硬伤：提示延迟高（约 1 秒）、样式完全不可控、移动端基本无效（iOS Safari 不触发）、无法支持富文本或图标。

  伪元素方案可控性强，但要注意几个实际坑：

  • 长文本自动换行需加 max-width: 200px; word-break: break-word;，否则溢出不可见
  • 如果表格设置了 table-layout: fixed，提示层可能被截断，此时需在 <table> 上加 <code>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 伪元素适合轻量、静态、单文案提示，别硬扛交互逻辑。 <p>最常被忽略的一点：表格行高变化时，<code>::after 的 top: 100% 可能导致提示层和文字间距错乱，建议统一用 top: calc(100% + 4px) 替代固定 margin-top，更健壮。