Pseudo Elements help.

[Peeeeeeeeeeynk]

i just  got recently introduced to the ::before and ::after pseudo elements and did some tinkering.

Why doesn't this work?

 

I have this code

HTML

<div class="box"></div>.

 

CSS

 

.box::after

{

  content:"";

  background-color:blue;

  height:150px;

  width:150px;

}

 

\why can't i see the box? it only appears when i put content in it and it doesn't even get height and width values just the background-color.

 

but why does this work with normal css

like this

.box

{

background-color:blue;

height:150px;

width:150px;

}

 

can someone explain this to me?

[Peeeeeeeeeeynk]

I managed to make the box visible by placing the position:absolute. property but why does it only work when i do this?

[Ciccioo]

the problem should be this:

 

the square you're inserting ::after is just pure text (a text node), so it behaves like is an inline element

you can't define the height and width of inline elements, because of what they are (they just need to fit in the document flow)

the solution is to set display: block for the ::after element

 

your workaround works because setting position: absolute automatically sets display: block, because the element is taken out of the document flow

 

 

one little thing: ::after is a pseudo-selector, not a pseudo-element edit: no, i'm wrong, and dumb

 

edit again: looks like the ::after element is inline by definition, as you can read on MDN