意外行为：伪元素和显示：table-cell

Question

为什么display: table-cell在伪元素上使用时表现不同？

例如，以下元素将并排放置：

<div style="display:table-cell">one</div>
<div style="display:table-cell">two</div>

示例：http://jsfiddle.net/tQKzq/

但是，在伪元素上使用display: table-cell时，元素会堆叠起来：

div::after{
   content: "two";
   display: table-cell;   
}

<div style="display:table-cell">one</div>

示例：http://jsfiddle.net/tQKzq/1/

Answer 1

::after伪元素呈现为div的子元素，因此它不是填充与div单元格相同的行，而是存在于其自己的匿名块级别中div单元格中的表格，在其自己的行上，位于文本“one”下方。

如果您的div显示为表格行，则文本“one”将包含在其自己的匿名表格单元格中，而::after伪元素将包含在其自己的另一个单元格中在同一行：

div {
  display: table-row;
}

div::after {
  content: "two";
  display: table-cell;
}

<div>one</div>