:after pseudo element is not showing up

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