如何在 CSS 中将 td::before 的值居中

Question

我有这个 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;
}

我想隐藏td的值，即100，并将其替换为500的内容，但是500的值不居中，因为即使100的值被隐藏，它仍然检测到它。

我该怎么办，非常感谢！

Answer 1

不要使用

visibility

，使用

font-size

tr#data td:nth-child(2) {
  font-size: 0;
}

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

td {
  border: 1px solid red;
}

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