Использование "сгенерированного контента css" без добавления элементов переноса и избыточной разметки

Question

Я хотел бы добавить символ валюты, используя "CSS сгенерированный контент" после каждой цены, присутствующей в HTML-таблице.

В настоящее время я указываю ячейку таблицы, которая содержит цены следующим образом

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

Чтобы достичь своей цели, я завернул каждый .prices содержание с пролетом, написав следующее правило CSS:

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

Он работает правильно, но я хотел бы избежать обтекания с span.

Очевидно, что применение "сгенерированного контента" непосредственно к TD может быть решением, допускающим только то, что валюта записывается до значения, а с моим фактическим решением валюта записывается после.

Answer 1

Попробуйте это демо

<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

Сделай это:

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

или поставить символ евро перед содержанием:

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