css - 予期しない動作: 疑似要素と表示: 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、セルと同じ行に入力するのではなく、セル内の独自の行のテキスト「one」の下にあるdiv独自の匿名ブロックレベル テーブルに存在します。div

代わりに表の行として表示される場合div、テキスト「one」は独自の無名の表のセルに含まれ、::after疑似要素は同じ行の独自の別のセルに含まれます。

div {
  display: table-row;
}

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

<div>one</div>