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

Question

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

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

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

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

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

它运行正确，但我想避免用跨度包装。

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

Answer 1

做这个：

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

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

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

Answer 2

试试这个演示

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

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