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)。

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

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

Answer 2

我猜测伪：after元素的默认显示是内联的。因为：after元素没有内容，所以它缩小为空。

设置display:block然后设置宽度＆amp;高度适用，你可以看到你的元素。

.dropbox:after {
    content:'';
    width:10px;
    height:10px;
    background:#ff0000;
    top:100%;
    left:50%;
    margin-left:5px;
    display: block
}

：伪元素未显示之后

2 个答案: