CSS: how to set content by class? [duplicate]

Question

In one table, I have fixed content for each class.

    <td class="matched">Matched</td>
    ...
    <td class="not-matched">Not Matched</td>

Is there way to avoid typing content every time?

    <td class="matched"></td>
    ...
    <td class="not-matched"></td>

Answer 1

You can use the ::before or ::after selectors to create a pseudo-element, and apply a content to it.

.matched::before {
  content: "Matched";
}

.not-matched::before {
  content: "Not Matched";
}

<table>
  <tr>
    <td class="matched"></td>
    <td class="not-matched"></td>
  </tr>
  <tr>
    <td class="matched"></td>
    <td class="not-matched"></td>
  </tr>
  <tr>
    <td class="matched"></td>
    <td class="not-matched"></td>
  </tr>
</table>

The downside of this is that those texts are not selectable.

---

You can also optimize the code like below:

[class]::before {
  content: attr(class);
}

<table>
  <tr>
    <td class="matched"></td>
    <td class="not-matched"></td>
  </tr>
  <tr>
    <td class="matched"></td>
    <td class="not-matched"></td>
  </tr>
  <tr>
    <td class="matched"></td>
    <td class="not-matched"></td>
  </tr>
</table>