CODEWITHSUNDEEP
htmlcss
user3618556
user3618556

Reputation: 63

:after pseudo element is not showing up

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.

Upvotes: 6

Views: 17025

Answers (2)

kidconcept
kidconcept

Reputation: 559

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
}

Upvotes: 4

Josh Crozier
Josh Crozier

Reputation: 240928

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

Upvotes: 9

Related Questions