在表格行内部使用伪元素(:after, :before)是否可行？

Question

我想将一个绝对定位的元素添加为一行表格的:before（或:after）。

Look at this:

table {
  border: 1px dotted gray;
  border-collapse: collapse;
  border-spacing: 0;
  td {
    padding: 0;
    margin: 0;
    width: 100px;
    background: rgba(255, 0, 0, 0.2)
  }
}

table.a .special::before {
  content: 'a';
}

table.b .special::before {
  content: 'a';
  display: block;
  position: absolute;
  right: 10px;
}

table.c .special::after {
  content: 'a';
  display: block;
  position: absolute;
  right: 10px;
}

table.d .special .after {
  display: block;
  position: absolute;
  right: 10px;
  top: 0;
}

<table>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
  <tr class='special'>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
</table>
<br/>
<table class="a">
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
  <tr class='special'>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
</table>
<br/>
<table class="b">
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
  <tr class='special'>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
</table>
<br/>
<table class="c">
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
  <tr class='special'>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
</table>
<Br/>
<table class="d">
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
  <tr class='special'>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <div class='after'>a</div>
  </tr>
</table>

我假设在添加这样一个元素时，渲染引擎（至少基于Webkit的）认为它是某种表单元格。

:before 在所有浏览器中都效果不佳。但是:after 在Firefox中效果非常好，在webkit中效果几乎很好。在WebKit中，它会保留一小段空间并使整个表格宽度变大。 - 这是我在WebKit中困扰我的地方。

如何修复这个问题？我可以在哪里阅读关于为什么会发生这种情况的内容？

- Aleksandr Motsjonov

---

这是一个有趣的问题，但不清楚您想要如何布局。您能详细说明吗？ - Marc Audet

谢谢你下面的回答。我会看看那里能找到什么。我已经更新了问题并提供了解决方案和初始问题。请查看一下。 - Aleksandr Motsjonov

脚本似乎运行良好，绝对是正确的方法。 - Marc Audet

Answer 1

在这个例子中，您正在使用::after和::before伪元素在表格行之后或之前添加内容，这基本上会破坏表格布局并导致不可预测的结果。

如果将生成的内容添加到表格单元格中，结果将更加一致。

除了生成内容的原始规范外，没有什么可以参考的。

http://www.w3.org/TR/2009/CR-CSS2-20090908/generate.html#before-after-content

此外，需要注意的是，在创建表格时，CSS渲染引擎会生成匿名框。

http://www.w3.org/TR/2009/CR-CSS2-20090908/tables.html#anonymous-boxes

然而，由于生成的内容不是DOM的一部分，整个表格渲染过程可能无法合理地处理额外的伪元素。

您正在涉足一个规范不明确的领域，任何支持都将是特定于浏览器的。

根据您的布局要求，您可能需要使用JavaScript或jQuery来更改表格的DOM以达到所需的效果。

- Marc Audet

Answer 2

使用第一个单元格而不是整行作为伪元素绝对定位的宿主。

row > td:first-child::before {
  content: '';
  position: absolute;
  .
  .
}

- leonheess