Search code examples
csspseudo-element

Missing a CSS3 property. What is it?


There's a simple CSS 3 hack to append   to a div's contents, to prevent it from height-collapsing regardless of whether it contains text or not. I just can't find it again.

Where is it?

<div></div> <!-- nothing in it = will collapse -->

<div>&nbsp;</div> <!-- still nothing in it but with &nbsp; appended it won't collapse -->

<div>SOME CONTENT&nbsp;</div> <!-- "SOME CONTENT" is added via JS; -->


Solution

  • You may be talking about :after and :before pseudo-elements and the content property.

    #someId:after {
        content: '&nbsp;';
    }
    

    But why not to use min-height as Kolink suggested?

    As pointed in the comments, this appends as text, so the solution is to use the Unicode representation as a escaped sequence:

    #someId:after {
        content: '\0000a0';
    }