Prevent margin collapse using pseudo element

Prevent margin collapse using `:before` and `:after` pseudo elements

by Lucas Krause

HTML

<div class=c><p>hello world.</p></div>

CSS

.c {
    background:#eee;
}
.c::after,
.c::before {
    content:"";
    display:table; /*`display:block` doesn't work - margins still collapse. requires `display:table`*/
}