html - 垂直对齐 :after pseudo element

Question

我正在尝试将 :after 伪元素移动到 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/