表格单元格中的样式内容而不添加额外的标签？

Question

我的表格中有内容：

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

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

:before {content:<span>;} 

会很好（以及它的 :after 选择器），因为我将元素包装在渲染级别，但 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;
}