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>

我想做的是保留 true/false 数据，但使用 CSS 将数据转换为勾号/十字或笑脸/皱眉图像。

我想我已经看到了这个的 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 属性隐藏文本。或者，您可以只将 true/false 作为类而不是单元格中的 HTML 文本输出。