垂直对齐：在伪元素之后

Question

我试图移动一个：在pesudo元素之后来到div的末尾，有点像一个页脚。

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

.box {
     height: 60vh;
}

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

然而，伪内容总是在“一些内容在这里”之后立即放置，而不是作为.box的页脚...任何想法？

Answer 1

您可以使用position属性将:after放置为页脚​​：

.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;
}

演示：http://jsfiddle.net/oc45nyux/

Answer 2

只需将display: block;添加到:after并删除vertical-align: bottom;

即可

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

Answer 3

垂直对齐仅适用于两种情况：内联块或表格单元

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