CODEWITHSUNDEEP
htmlcsspseudo-element
tadaa9
tadaa9

Reputation: 523

Strange behavior : display table + after pseudo-element

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!

Upvotes: 0

Views: 734

Answers (1)

Olaf Dietsche
Olaf Dietsche

Reputation: 74038

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/

Upvotes: 3

Related Questions