奇怪的行为：显示表+伪元素后

Question

I noticed a strange phenomenon when I apply an :after pseudo-element on an element with display:table as you can see here : http://jsfiddle.net/rKzNv/1/

The pseudo-element may behave like a table cell when it should not.

Do you have any idea? Is this a bug? Thanks!

Answer 1

From MDN - ::after (:after)

The CSS :after pseudo-element matches a virtual last child of the selected element.

So .table:after matches a virtual child of div.table , which is allowed to behave as a table cell.

The behaviour changes, when you replace display: table-cell; with display: table-row;

http://jsfiddle.net/rKzNv/2/