是否可以在表格行中使用伪元素（：after，：before）？答案

【问题标题】：Is it possible to use pseudo-elements (:after, :before) inside a table row?是否可以在表格行中使用伪元素（：after，：before）？
【发布时间】：2013-11-04 12:04:05
【问题描述】：

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

看看这个：

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 中困扰我的地方。

如何解决这个问题？我在哪里可以了解它发生的原因？

【问题讨论】：

这是一个有趣的问题，但不清楚您要对布局做什么。你能详细说明一下吗？
谢谢。在下面为您解答。看看我能在那里找到什么。我用解决方案和初始问题更新了问题。请检查一下。
脚本似乎运行良好，绝对是正确的方法。

标签： css html-table pseudo-element absolute

【解决方案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 更改为所需的效果。

【讨论】：

【解决方案2】：

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

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

【讨论】：