html - :after pseudo element is not showing up

Question

我已将我的问题简化为:

HTML

<div class="dropbox">
</div>

CSS

.dropbox {
    border:2px solid #ff0000;
    height:200px;
    width:50%;
    margin:auto;
}
.dropbox:after {
    content:'';
    width:10px;
    height:10px;
    background:#ff0000;
    top:100%;
    left:50%;
    margin-left:5px;
}

为什么我不能让 :after 伪元素显示出来？

我需要它在 div 的底部中间。明确地说，它应该在中间的div下面。

Answer 1

值得注意的是，伪元素默认是 inline - 因此您不能添加边距或更改它的尺寸。如果您将显示更改为 block，您会注意到它的显示与您预期的一样 (example) .

在您的情况下，您需要绝对定位它相对到父元素。

Example Here

.dropbox {
    border:2px solid #ff0000;
    height:200px;
    width:50%;
    margin:auto;
    position:relative;
}
.dropbox:after {
    content:'';
    position:absolute;
    width:10px;
    height:10px;
    background:#ff0000;
    top:100%;
    left:50%;
    margin-left:5px;
}