使用“css生成的内容”而不添加包装元素和冗余标记

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

我希望在html表格中的每个价格之后使用“css generated content”添加货币符号。

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:

为了达到我的目标,我用span打包每个.prices内容,编写以下css规则:

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

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

它运行正常但我想避免用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.

显然,将“生成的内容”直接应用于TD可能只是接受货币在价值之前写入的解决方案,但我的实际解决方案货币是在之后编写的。

2 个解决方案

#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:' €';
}

#2

Do this:

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

or to put the Euro symbol before the content:

或者在内容之前加上欧元符号:

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

#1