Question

我在表格中有内容：

<td>1</td>
<td>2</td>
<td>3</td>

表格单元格本身具有样式（如背景颜色和边框），但我希望在数字周围有一个圆圈（不使用图像），使用border-radius（有高度，宽度等）...但是我不想添加额外的标签。

:before {content:<span>;}

没关系（及其：选择器之后），因为我将元素包装在渲染级别，但content属性不会呈现HTML标记。

有没有办法做到这一点，还是我必须将每个单元格的内容包装在另一个标签中？浏览器兼容性是Mobile Safari（webkit），因为它适用于Cordova项目，因此请使用您能想到的所有新方法。

Answer 1

这样做怎么样？

Demo

<table>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
</table>

td {
    position: relative;
    height: 40px;
    width: 40px;
}

td:after {
    content: '•';
    color: #f00;
    position: relative;
    font-size: 90px;
    left: -20px;
    top: 23px;
    z-index: -1;
}

表格单元格中的样式内容，无需添加额外标签？

1 个答案: