css - 仅使用 CSS 将 True/False 转换为 Tick/Cross 图像

Question

我有一些从 JSON 读取并写入表的数据。

目前看起来如下。

<table>
<tr><td>Feature 1</td><td>true</td><td>false</td></tr>
<tr><td>Feature 2</td><td>false</td><td>false</td></tr>
<tr><td>Feature 3</td><td>true</td><td>true</td></tr>
</table>

我想要做的是保留真/假数据，但使用 CSS 将数据转换为 Tick/Cross 或笑脸/皱眉图像。

我的事情我已经看到了 CSS3 符号，但我找不到它。

Answer 1

您可以对 HTML 进行一些操作，并使用值 true/false 向 TD 添加类。

    <tr><td>Feature 1</td><td class="true">true</td><td class="false">false</td></tr>

在 CSS 中，您可以使用属性选择器，或者在此类中仅使用类选择器

td.true {

}

td.false {

}

您还可以使用 text-indent 属性隐藏文本。或者，您可以将真/假输出为一个类，而不是单元格中的 HTML 文本。