html - 使用 "css generated content"而不添加包装元素和冗余标记

Question

我想在 html 表格中出现的每个价格之后使用“css 生成的内容”添加货币符号。

目前我用以下方式指示包含价格的表格单元格

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

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

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

它运行正常，但我想避免用 span 换行。

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

Answer 1

这样做:

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

或将欧元符号放在内容之前:

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