Using "css generated content" without adding wrapping elements and redundant markup

Question

I would like to add Currency symbol using "css generated content" after each price present in an html table.

Currently I'm indicating table-cell that contain prices in the following way

<table>
  <tr>
    <td>Test</td>
    <td class='prices'>123</td>
  </tr>
</table>

In order to reach my target I wrap each .prices content with a span, writing the following css rule:

TD *:after
{
  content:' €';
}

It runs correctly but I would like to avoid wrapping with span.

Obviously applying "generated content" directly to TD could be the solution only accepting that currency is written before value, but with my actual solution currency is written after.

Answer 1

try this Demo

<table>
  <tr>
    <td>Test</td>
    <td class='prices'>123</td>
  </tr>
</table>

td{
    width:100px;
    border:1px solid blue;
}
td.prices:after
{
  content:' €';
}

Answer 2

Do this:

.prices:after {
    content:' €';
}

or to put the Euro symbol before the content:

.prices:before {
    content:'€ ';
}