html - 在不添加额外标签的情况下在表格单元格中设置样式内容？

Question

我在表格中有内容:

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

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

:before {content:<span>;} 

会很好(及其 :after 选择器)，因为我在呈现级别包装元素，但内容属性不会呈现 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;
}