Question

我想在html表格中显示每个价格后，使用“css generated content”添加货币符号。

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

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

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

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

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

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

Answer 1

这样做：

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

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

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

Answer 2

试试这个Demo

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

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

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

2 个答案: