意外行为:伪元素和显示: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单元格,在自己的行,文字"一"的下方.

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

div {
  display: table-row;
}

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

<div>one</div>