Internet Explorer 8 中由“content”CSS 属性添加的居中文本

Question

我创建了一个包含一些内容的 HTML 表格。一些单元格的内容下方应该有一个星号 (*)，所以我在这些单元格中添加了一个 asterisk 类：

<table class="numbers">
    <tr>
        <td class="asterisk">1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
    </tr>
    <tr>
        <td>5</td>
        <td class="asterisk">6</td>
        <td class="asterisk">7</td>
        <td>8</td>
    </tr>
</table>

然后，我添加了以下 CSS 规则，它使用 :after 伪元素以及 content 属性。它附加星号并将其放在单元格内容下方：

.asterisk:after {
    display:block;
    content: '*';
}

此外，我为单元格添加了一些空间，在它们上设置了边框，更重要的是，使它们的文本集中：

.numbers td {
    width: 40px;
    border: 1px solid black;
    text-align: center;
}

使用更多的 CSS 规则（可以在 fiddle 中看到）我得到了以下结果：

好吧，我的意思是，我在 Firefox 和 Chrome 上得到了这个结果，但我在 Internet Explorer 8 中也需要它！然而，我得到了这个：

如何在 IE8 中获得第一个结果？

Answer 1

似乎与其他浏览器不同，Internet Explorer 8 及更低版本中的伪元素的 CSS 附加内容不会从父元素继承 text-align 属性。幸运的是，解决方案很简单：只需在伪元素规则中添加一个text-align 属性，如this fiddle：

.asterisk:after {
    text-align: center;
    display: block;
    content: '*';
}

或者，更好的是，您可以让子伪元素继承父 text-align 属性：

.asterisk:after {
    text-align: inherit;
    display: block;
    content: '*';
}