CSS: how to set content by class?

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>

are you using some kind of template engine or pure HTML / CSS? — Martin, Dec 26 '19 at 18:20
In my opinion its preferable to use `javascript` for this type of feature. In this case the text will be directly injected in the balise and not as a `::after` element. — johannchopin, Dec 26 '19 at 18:34

score 0 · Accepted Answer · edited Dec 26 '19 at 19:10

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>

CSS: how to set content by class?

1 Answers1