th::before默认不生效是因为th是table-cell，浏览器按规范不支持在其上渲染伪元素；必须显式设display: inline-block（或block）并配合content: ""才能生效。
table th:before 为什么默认不生效
因为 <th> 是表格单元格，浏览器对它的<a style="color:#f60; text-decoration:underline;" title="伪元素" href="https://m.php.cn/zt/15988.html" target="_blank">伪元素</a>渲染有特殊限制：默认 <code>display 是 table-cell，而 ::before 在 table-cell 上无法正常生成内容（尤其在 Chrome 和 Safari 中常被忽略）。这不是 bug，是规范行为——table-cell 不参与常规的伪元素布局流。
必须显式设置 display: inline-block 或 block
要让 th::before 生效，得先“解放”它：
th {
position: relative;
display: inline-block; /* 关键！不能用 table-cell */
vertical-align: middle;
}
th::before {
content: "?";
margin-right: 6px;
font-size: 14px;
}
注意三点：
-
display: inline-block是最稳妥的选择；用block会导致表头换行、破坏表格结构 -
position: relative是为了后续可能需要绝对定位图标（比如右上角 badge） - 如果用了
text-align: center，图标会跟着文字一起居中，但margin-right仍有效
用 SVG 图标替代 Unicode 字符更可控
Unicode 图标（如 ?）字体依赖强、尺寸难调、颜色继承复杂。推荐用内联 SVG：
th::before {
content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='16' height='16'%3E%3Cpath fill='%23666' d='M15.5 14h-.79l-.28-.27A6.421 6.421 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z'/%3E%3C/svg%3E");
margin-right: 6px;
}
好处：
- 缩放不失真，
width/height可直接在 data URL 里控制 - 颜色用
fill写死，避免受父级color干扰 - 无需额外 HTTP 请求，也比加载外部 SVG 更稳定
兼容性与移动端适配要点
IE 完全不支持 th::before（哪怕加了 display），所以如果项目还要支持 IE，就得用 JS 插入或改用 <span></span> 包裹内容。现代浏览器没问题，但要注意：
- 移动端 Safari 对
inline-block表头的行高计算有时偏紧，建议加line-height: 1.4 - 如果表格用了
border-collapse: collapse，图标和边框之间可能粘连，用padding-left替代margin-right更可靠 - 图标和文字之间留白别靠
em单位，用固定px或rem，避免字体缩放时错位
真正麻烦的不是怎么写，而是得记住：表格单元格天生排斥伪元素，你每次想这么干，都得先给它“松绑”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
