Make pseudo element's height the same as the element it is attached to

Question

I have a very quick question but I don't know how to phrase it optimally to get a relevant search result. Basically I have a <div class="element"></div> with .element{height:100px}. I'm adding a after pseudo element to my .element with the same height but I'm not sure how to reference the original height in the pseudo one.

Thank you. (I hope what I just said makes sense)

Answer 1

Sounds like you can simply use 100%:

.element:after { 
    content: 'your generated content'; 
    display: block; 
    height: 100%; 
}