css - 意外行为：伪元素和显示：表格单元格

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伪元素呈现为 your 的子元素，div因此它不会填充与单元格相同的行，而是位于div单元格内自己的匿名块级表中div，位于其自己的行中，位于文本“one”下方。

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

div {
  display: table-row;
}

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

<div>one</div>