怎么在HTML表格中通过content:open-quote在表头前添加装饰性引号-html教程-PHP中文网

open-quote 不能直接用于元素，必须通过 ::before 伪元素配合 display: table-cell 和 quotes 属性实现；ie 和旧版 safari 支持差，推荐用字面量引号或字体图标替代。

怎么在html表格中通过content:open-quote在表头前添加装饰性引号

content:open-quote 不能直接用于 `<th> 元素 <p>因为 <code><th> 默认不是生成内容的容器，<code>content` 属性只对 `::before` 和 `::after` 伪元素生效，且要求元素是“可生成内容的”（即 display 值不为 `none`，且需有明确的盒模型）。但更关键的是：`<th> 本身不支持 <code>content` 属性——你必须用 `::before` 伪元素挂载。

必须显式设置 `display: table-cell` 才能触发引号计数

open-quote 和 close-quote 依赖 quotes 属性和嵌套层级，而浏览器对表格单元格的引号计数逻辑很弱。默认情况下，<th> 虽然渲染为表格单元格，但伪元素的引号计数常被忽略。解决方案是强制重置显示行为： <ul><li>给 <code><th> 添加 <code>display: table-cell（即使它本来就是）

同时设置 quotes: "“" "”" "‘" "’"（否则 open-quote 无依据）

必须用 ::before，且设 content: open-quote

th {
  quotes: "“" "”" "‘" "’";
  display: table-cell;
}
th::before {
  content: open-quote;
  margin-right: 0.2em;
}

引号会重复出现？检查是否误用了 `list-style` 或继承了 `quotes`

常见错误是父级（如 <thead> 或 <code><table>）也设置了 <code>quotes，导致嵌套引号叠加；或者 <th> 内含 <code><span></span> 等子元素又套了一层 ::before。验证方式：

用开发者工具检查 computed 面板里的 quotes 值来源
确保只有 <th> 一级声明 <code>quotes，避免从 <table> 继承 <li>如果表头含图标或复杂结构，优先把引号加在 <code><th> 的 <code>::before，而非内部标签
IE 和旧版 Safari 不支持 open-quote 在表格中的行为

IE 完全忽略 content: open-quote 在 <th> 上的表现；Safari ≤ 15 对嵌套引号计数不稳定。实际项目中更稳妥的做法是： <ul> <li>用字面量引号： <code>content: "“";
或改用字体图标（如 content: "❞";，配合 font-family: "Segoe UI", sans-serif）
若必须动态引号（如中英文切换），需 JS 注入或服务端预处理