CODEWITHSUNDEEP
htmlcss
nwb
nwb

Reputation: 683

Vertically align :after pseudo element

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?

Upvotes: 1

Views: 260

Answers (3)

Bhojendra Rauniyar
Bhojendra Rauniyar

Reputation: 85643

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*/
}

Upvotes: 1

dfsq
dfsq

Reputation: 193301

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/

Upvotes: 4

Arbel
Arbel

Reputation: 30999

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

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

Upvotes: 2

Related Questions