html - How to center the value of a td::before in CSS - Stack Overflow

admin管理员组

文章数量:1129759

I have this HTML

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

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

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

I have this HTML

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

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

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

I want to hide the value of td, which is 100, and replace it with the content of 500, but the value of 500 is not centered, because even though the value of 100 is hidden, it still detects it.

How can i do that, thank you so much!

• html
• css

Share Improve this question Follow edited Jan 8 at 17:33 Naeem Akhtar 1,01411 gold badge1010 silver badges2323 bronze badges asked Jan 8 at 6:33 Adolfo YamamotoAdolfo Yamamoto 1 New contributor Adolfo Yamamoto is a new contributor to this site. Take care in asking for clarification, commenting, and answering. Check out our Code of Conduct. 1

• You probably know this, but for other people: Do not replace content with CSS. It will break. Always change the HTML. – RoToRa Commented Jan 8 at 20:07

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 3

Don't use visibility, use 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>

本文标签： htmlHow to center the value of a tdbefore in CSSStack Overflow