：伪元素未显示之后

Question

I have simplified my question to this:

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

Why can't I get the :after pseudo element to show up?

I need it at the bottom middle of the div. To by clear, it should be under the div in the middle.

Answer 1

It's worth noting that the pseudo element is inline by default - you therefore can't add margins or change the dimensions of it. If you were to change the display to block you will notice that it shows up as you would expect (example) .

In your case you need to absolutely position it relative to the parent element.

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

I'm guessing that the default display for the pseudo :after element is inline. Because the :after element has no content it shrinks to nothing.

Set display:block then your width & height apply and you can see your element.

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