CODEWITHSUNDEEP
csspseudo-element
feeela
feeela

Reputation: 29932

CSS of pseudo-element affects parent element

I've set up a test case, where a CSS pseudo-element (::after) is displayed on mouse-hover on the given (parent-) element. Everything works fine so far, but the negative top-margin for the pseudo-element affects the parent instead of the generated element. (While the negative left-margin works as expected.)

Can anyone explain this behavior and/or know a workaround?

Upvotes: 1

Views: 995

Answers (2)

thirtydot
thirtydot

Reputation: 228182

The first thing to be aware of is that when you use ::after, the DOM looks like this:

<div class="land" lang="de">[content of element]<after></after></div>

So, this behaves in exactly* the same way: (use Chrome or Firefox)
http://jsfiddle.net/MLThM/7/

And with some extraneous properties removed:
http://jsfiddle.net/MLThM/8/

The reason that the parent element moves is collapsing margins.

One way to "fix" that is to add overflow: hidden to .land:
http://jsfiddle.net/MLThM/9/

And the fix applied to your original demo:
http://jsfiddle.net/MLThM/10/

* = let's forget about possible bugs in ::after and ::before for the moment, they aren't relevant to the current question.

Upvotes: 3

Jamie Dixon
Jamie Dixon

Reputation: 53989

You could always set your container div to position:relative and then the new content to absolute. This way you won't affect any of the margins on the containing div.

Example : http://jsfiddle.net/MLThM/6/

Upvotes: 3

Related Questions