如何用CSS隐藏表格单元格内容并替换为星号（无法嵌套元素）

你遇到的核心问题是：td设置font-size: 0后，伪元素的font-size: 1em会继承这个0值，导致星号无法显示。下面提供几种无需在td内嵌套元素的解决思路：

方案1：利用颜色透明隐藏原内容 #

通过将td的文字颜色设为透明，同时让伪元素显示正常颜色，实现内容替换：

table {
  width: 100%;
}

td {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
  color: transparent; /* 隐藏原单元格文字 */
  position: relative; /* 为伪元素定位提供基准 */
}

td::after {
  content: '*****'; /* 替换的星号，可改为圆点'......' */
  color: #333; /* 伪元素文字颜色 */
  position: absolute;
  left: 8px; /* 与td的padding-left保持一致，保证对齐 */
  top: 50%;
  transform: translateY(-50%); /* 垂直居中对齐 */
}

方案2：通过可见性属性控制 #

利用visibility的继承特性，隐藏td原内容但让伪元素可见：

table {
  width: 100%;
}

td {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
  visibility: hidden; /* 隐藏单元格内所有内容 */
  position: relative;
}

td::after {
  content: '*****';
  visibility: visible; /* 单独让伪元素可见 */
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
}

方案3：用裁剪路径隐藏原内容 #

通过clip-path将td的原内容区域裁剪掉，只显示伪元素：

table {
  width: 100%;
}

td {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
  clip-path: inset(100% 0 0 0); /* 裁剪掉所有内容区域 */
  position: relative;
}

td::after {
  content: '*****';
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
}

以上三种方案都不需要修改HTML结构，完全适配无法添加嵌套元素的场景。

内容的提问来源于stack exchange，提问作者A.Ston