Vertically align :after pseudo element

Question

I'm trying to move an :after pesudo element to come at the end of a div, sort of like a footer.

<div class="box">
    Some content here
</div>

.box {
     height: 60vh;
}

.box:after {
     content: "";
     vertical-align: bottom;
}

However, the pseudo content is always placed imediately after "Some content here", rather than as a footer for the .box... any ideas?

Answer 1

You can use position property to put :after like a footer:

.box {
    height: 60vh;
    border: 1px #AAA solid;
    position: relative;     // <-- relative
}
.box:after {
    content: "test";
    position: absolute;    // <-- absolute
    bottom: 0;
    right: 0;
    left: 0;
    background: #DDD;
}

Demo: http://jsfiddle.net/oc45nyux/

Answer 2

Simply add display: block; to :after and remove vertical-align: bottom;

.box:after {
     display: block;
     content: " ";
}

Answer 3

Vertical-align only works with two scenarios: inline-block or table-cell

.box:after {
     content: "";
     vertical-align: bottom;
     display: inline-block;
     height: 100%; /* also add this line of code to make it work*/
}