why div with :after gives horizontal scroll to parent element

Question

I have this situation http://jsfiddle.net/m_aleksandrova/9THdb/

div.with-after has an :after pseudo element (that flows to the right). Its parent (div.container) requires a vertical scroll.

<div class="container">
  <div class="with-after"></div>
</div>

The question is why :after causes the horizontal scroll? I thought if :after is absolutely positioned, it's not in the flow anymore.

Is it possible to make :after element flows underneath vertical scroll and goes further to the right?

Answer 1

To acheive the Variant 3, you have to make the below changes to your class with-after.

Here is the Fiddle.

Changes in CSS:

.with-after {
    border: 1px solid green;
    height: 50px;
    padding: 0 93px;
    position: absolute;
    right: 480px;
    z-index: -1;
}

You have to make the main class i.e in your case win-after to have position absolute. This will remove its flow and by z-indexing it will lie underneath of the vertical scroll. Hope this helps.

THE LOGIC:

Like I said earlier, You cannot deceive the CSS by making a position:relative for the main class and postion:absolute for the pseudo element of the same class. So in order to acheive the effect of making the div underneath the vertical scroll, you have to define position:absolute for the class which has to go underneath the parent element. So defining a psudo of the same class with a different position, will hold no good for the browser to recogzine what you want and will behave weirdly by taking a combination of both the pseudo as well as actual element class, so making it transparent for the browser to know what you want, declare the main with-after class as the position:absolute and just making simple for the browser to know that it has to go underneath the parent element with a negative z-index. Hope this helps now.

Answer 2

Does something tlike this work for you? http://jsfiddle.net/David_Knowles/3arca/

.my-position-base {position: relative;}

Adding this wrapper gives a context for the crazy absolute positioning required to achieve what you are looking for.