Question

Why does display: table-cell behave differently when used on pseudo-elements?

For example, the following elements would be placed side by side:

<div style="display:table-cell">one</div>
<div style="display:table-cell">two</div>

Example: http://jsfiddle.net/tQKzq/

However, when using display: table-cell on a pseudo element, the elements are stacked:

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

<div style="display:table-cell">one</div>

Example: http://jsfiddle.net/tQKzq/1/

Answer 1

The ::after pseudo-element is rendered as a child of your div, so instead of populating the same row as the div cell, it lives in its own anonymous block-level table within the div cell, on its own line, beneath the text “one”.

If your div is displayed as a table row instead, then the text “one” will be contained within its own anonymous table cell, and the ::after pseudo-element in another cell of its own on the same row:

div {
  display: table-row;
}

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

<div>one</div>