意外的行爲：僞元素和顯示：表格單元格

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>