如何在CSS中使td::before生成的替换内容居中显示

原始代码 #

HTML #

<tr id="data">
  <td>child1</td>
  <td>100</td>
  <td>child3</td>
</tr>

CSS #

tr#data td:nth-child(2) {
  visibility: hidden;
}

tr#data td:nth-child(2)::before {
  content: "500";
  visibility: visible;
}

问题分析 #

visibility:hidden仅隐藏元素内容，但不会释放其占据的布局空间，导致伪元素::before被原内容的空间挤压，无法居中显示。

解决方案 #

方法1：绝对定位+移出原内容 #

给目标单元格设置相对定位，将伪元素设为绝对定位实现居中，同时把原内容移出可视区域：

tr#data td:nth-child(2) {
  position: relative;
  text-indent: -9999px; /* 将原内容移出可视范围 */
}

tr#data td:nth-child(2)::before {
  content: "500";
  position: absolute;
  left: 50%;
  transform: translateX(-50%); /* 水平居中 */
  text-indent: 0; /* 重置伪元素缩进 */
}

方法2：字体大小控制 #

通过将单元格字体设为0隐藏原内容，恢复伪元素字体大小并开启单元格居中：

tr#data td:nth-child(2) {
  font-size: 0; /* 隐藏原内容 */
  text-align: center; /* 开启单元格水平居中 */
}

tr#data td:nth-child(2)::before {
  content: "500";
  font-size: 16px; /* 恢复伪元素字体大小，可按需调整 */
}

方法3：Flex布局居中 #

给单元格设置Flex布局，直接让伪元素居中，仅隐藏原内容：

tr#data td:nth-child(2) {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中（可选） */
}

tr#data td:nth-child(2)::before {
  content: "500";
}

tr#data td:nth-child(2) > * {
  visibility: hidden; /* 仅隐藏单元格内的原始内容 */
}

内容的提问来源于stack exchange，提问作者Adolfo Yamamoto