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

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显示为表行代替，然后将文字“一”将被包含在它自己的匿名表格单元格中，并在同一行上了自己的另一个小区::after伪元素：

div { 
 
    display: table-row; 
 
} 
 

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

<div>one</div>